@extends('layouts.app')

@section('content')
<div class="page-heading">
    <h3>Pengaturan Aplikasi</h3>
    <p class="text-subtitle text-muted">Atur parameter aplikasi seperti batas keterlambatan dan upah per jam.</p>

    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    <section class="section">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                @if(!$pengaturan)
                <div>
                    <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#editPengaturanModal">
                        Buat Pengaturan
                    </button>
                </div>
                @else
                <div>
                    <form action="{{ route('pengaturan.destroy') }}" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin menghapus pengaturan ini?');">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-outline-danger">
                            Hapus Pengaturan
                        </button>
                    </form>
                </div>
                @endif
            </div>


            <div class="card-body">
                <table class="table table-striped">
                    <tr>
                        <th>Maks. Terlambat (Menit)</th>
                        <td>{{ $pengaturan->maks_terlambat ?? '-' }}</td>
                    </tr>
                    <tr>
                        <th>Upah Per Jam (Rp)</th>
                        <td>{{ number_format($pengaturan->upah_per_jam ?? 0, 2, ',', '.') }}</td>
                    </tr>
                    <tr>
                        <th>Jam Masuk</th>
                        <td>{{ $pengaturan->jam_masuk ?? '-' }}</td>
                    </tr>
                    <tr>
                        <th>Jam Pulang</th>
                        <td>{{ $pengaturan->jam_pulang ?? '-' }}</td>
                    </tr>
                </table>
            </div>
        </div>
    </section>

    <!-- Modal Edit Pengaturan -->
    <div class="modal fade" id="editPengaturanModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <form action="{{ route('pengaturan.update') }}" method="POST">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title">Edit Pengaturan</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label>Maks. Terlambat (Menit)</label>
                            <input type="number" class="form-control" name="maks_terlambat" value="{{ $pengaturan->maks_terlambat ?? '' }}" required>
                        </div>
                        <div class="form-group">
                            <label>Upah Per Jam (Rp)</label>
                            <input type="text" class="form-control" name="upah_per_jam" value="{{ $pengaturan->upah_per_jam ?? '' }}" required>
                        </div>
                        <div class="form-group mt-3">
                            <label>Jam Masuk</label>
                            <input type="time" class="form-control" name="jam_masuk" value="{{ $pengaturan->jam_masuk ?? '' }}" required>
                        </div>
                        <div class="form-group mt-3">
                            <label>Jam Pulang</label>
                            <input type="time" class="form-control" name="jam_pulang" value="{{ $pengaturan->jam_pulang ?? '' }}" required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                        <button type="submit" class="btn btn-primary">Simpan</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection