@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        <button class="btn btn-secondary mb-0" onclick="window.location='{{ URL::to($url_menu) }}'"><i
                                class="fas fa-chevron-left me-1"></i>Kembali</button>
                        <button type="button" class="btn btn-success mb-0 btn-approve"
                            data-url="{{ route('approve', ['enc' => encrypt($list->id)]) }}">
                            <i class=" fas fa-solid fa-check me-1"></i> Approval
                        </button>
                        <button type="button" class="btn btn-danger mb-0 btn-reject"
                            data-url="{{ route('reject', ['enc' => encrypt($list->id)]) }}">
                            <i class="fas fa-solid fa-xmark me-1"></i> Tolak
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-2">
        <div class="row">
            <div class="col-md-12">
                <div class="row mx-1">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">Header Filter</h5>
                        </div>
                        <div class="card-body">
                            <div class="row g-3 align-items-start">
                                <div class="col-12 col-md-4">
                                    <label class="form-label">ID</label>
                                    <input type="text" class="form-control" style="height:40px" name="id"
                                        value="{{ $list->id }}" readonly>
                                </div>

                                <div class="col-12 col-md-4">
                                    <label class="form-label">Bulan</label>
                                    <input type="text" class="form-control" style="height:40px" name="bulan"
                                        value="{{ $list->bulan }}" readonly>
                                </div>

                                <div class="col-12 col-md-4">
                                    <label class="form-label">Tahun</label>
                                    <input type="text" class="form-control" style="height:40px" name="tahun"
                                        value="{{ $list->tahun }}" readonly>
                                </div>
                                <div class="col-12 col-md-4">
                                    <label class="form-label font-weight-bold">Catatan Dari Inputer</label>
                                    <textarea class="form-control" rows="2" readonly>{{ $list->keterangan ?? '-' }}</textarea>
                                </div>

                                {{-- KOTAK DEPARTEMEN --}}
                                <div class="col-12 col-md-4">
                                    <label class="form-label font-weight-bold">DEPARTEMEN</label>
                                    <div class="mono-card h-100">
                                        <ul class="list-unstyled mono-list mb-0">
                                            @forelse ($dpt as $row)
                                                <li>
                                                    <span class="key">{{ $row->departemen }}</span>
                                                    <span class="val">: {{ $row->total }}</span>
                                                </li>
                                            @empty
                                                <li><small class="text-muted">—</small></li>
                                            @endforelse
                                        </ul>
                                    </div>
                                </div>

                                {{-- KOTAK LOWONGAN --}}
                                <div class="col-12 col-md-4">
                                    <label class="form-label font-weight-bold">POSISI</label>
                                    <div class="mono-card h-100">
                                        <ul class="list-unstyled mono-list mb-0">
                                            @forelse ($lowongan as $row)
                                                <li>
                                                    <span class="key">{{ $row->lowongan }}</span>
                                                    <span class="val">: {{ $row->total }}</span>
                                                </li>
                                            @empty
                                                <li><small class="text-muted">—</small></li>
                                            @endforelse
                                        </ul>
                                    </div>
                                </div>

                            </div>
                        </div>

                       <style>
                            .mono-card {
                                border: 2px solid #dee2e6;
                                border-radius: .5rem;
                                padding: .75rem 1rem;
                                background: #fff;
                                box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
                            }

                            .mono-card .title {
                                font-weight: 600;
                                text-transform: uppercase;
                                font-size: .8rem;
                                color: #6c757d;
                                margin-bottom: .25rem;
                            }

                            .mono-list {
                                display: grid;
                                grid-template-columns: max-content max-content;
                            }

                            .mono-list li {
                                font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
                                display: contents;
                                line-height: 1.6;
                            }

                            .mono-list .val {
                                padding-left: .4rem;
                            }
                        </style>

                    </div>
                    <div id="hasil-mahasiswa" class="mt-3 card">
                        <div class="card-header">
                            <h5 class="mb-0">Detail Mahasiswa</h5>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-hover" id="torprod-tbl-detail-gr">
                                    <thead style="background-color:  #00b7bd4f;">
                                        <tr>
                                            <th scope="col">No</th>
                                            <th scope="col">ID</th>
                                            <th scope="col">Nama</th>
                                            <th scope="col">Departemen</th>
                                            <th scope="col">Posisi</th>
                                            <th scope="col">Absen WFO</th>
                                            <th scope="col">Absen Finger</th>
                                            <th scope="col">Nominal</th>
                                            <th scope="col">Total Nominal</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($detail as $a)
                                            <tr>
                                                <td class="text-center">{{ $loop->iteration }}</td>
                                                <td><input style="width:auto;" type="text" class="form-control"
                                                        value="{{ $a->id }}" readonly>
                                                </td>
                                                <td><input style="width:auto;" type="text" class="form-control"
                                                        value="{{ $a->nama }}" readonly>
                                                </td>
                                                <td><input style="width:auto;" type="text" class="form-control"
                                                        value="{{ $a->nama_dept }}" readonly>
                                                </td>
                                                <td><input style="width:auto;" type="text" class="form-control"
                                                        value="{{ $a->posisi }}" readonly>
                                                </td>
                                                <td><input type="text" class="form-control"
                                                        style="width: 120px; text-align: right;"
                                                        value="{{ $a->jumlah_absen }}" readonly></td>
                                                <td><input type="text" class="form-control"
                                                        style="width: 120px; text-align: right;"
                                                        value="{{ $a->absen_finger }}" readonly></td>
                                                <td>
                                                    <input type="text" class="form-control"
                                                        style="width: auto; text-align: right;"
                                                        value="{{ number_format($a->nominal, 0, ',', '.') }}" readonly>
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control"
                                                        style="width: auto; text-align: right;"
                                                        value="{{ number_format($a->total_nominal, 0, ',', '.') }}"
                                                        readonly>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <th colspan="6" class="text-end">Total Nominal</th>
                                            <th>
                                                <input type="text" class="form-control text-end" style="width:120px;"
                                                    value="{{ $finger }}" readonly>
                                            </th>
                                            <th>
                                                <input type="text" class="form-control"
                                                    style="width: auto; text-align: right;"
                                                    value="{{ number_format($detail->first()->nominal ?? 0, 0, ',', '.') }}"
                                                    readonly>
                                            </th>
                                            <th>
                                                <input type="text" class="form-control text-end" style="width:auto;"
                                                    value="{{ number_format($grandtotal, 0, ',', '.') }}" readonly>
                                            </th>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            // APPROVE
            $(document).on('click', '.btn-approve', function() {
                const url = $(this).data('url');
                const $btn = $(this);

                Swal.fire({
                    title: 'Approve data ini?',
                    text: 'Apakah anda yakin menyetujui transaksi absen ini?',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, Approve',
                    cancelButtonText: 'Batal'
                }).then(function(res) {
                    if (!res.isConfirmed) return;

                    $btn.prop('disabled', true);
                    Swal.fire({
                        title: 'Memproses...',
                        allowOutsideClick: false,
                        showConfirmButton: false,
                        didOpen: () => Swal.showLoading()
                    });

                    $.ajax({
                        url: url,
                        type: 'POST',
                        dataType: 'json',
                        success: function(resp) {
                            Swal.fire('Sukses', (resp && resp.message) ||
                                    'Berhasil di-approve', 'success')
                                .then(() => window.location.href =
                                    "{{ URL::to($url_menu) }}");
                        },
                        error: function(xhr) {
                            var msg = (xhr.responseJSON && xhr.responseJSON.message) ||
                                xhr.statusText || 'Request gagal';
                            Swal.fire('Gagal', msg, 'error');
                        },
                        complete: function() {
                            $btn.prop('disabled', false);
                        }
                    });
                });
            });

            // REJECT
            $(document).on('click', '.btn-reject', function() {
                const url = $(this).data('url');
                const $btn = $(this);

                Swal.fire({
                    title: 'Tolak data ini?',
                    input: 'textarea',
                    inputLabel: 'Alasan penolakan *',
                    inputPlaceholder: 'Wajib diisi...',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, Tolak',
                    cancelButtonText: 'Batal',
                    icon: 'warning',
                    // WAJIB: validasi alasan
                    inputValidator: (value) => {
                        if (!value || !value.trim()) {
                            return 'Alasan wajib diisi';
                        }
                        // contoh: minimal 5 karakter
                        if (value.trim().length < 5) {
                            return 'Alasan terlalu singkat (min. 5 karakter).';
                        }
                    }
                }).then(function(res) {
                    if (!res.isConfirmed) return;
                    const reason = res.value.trim();

                    $btn.prop('disabled', true);
                    Swal.fire({
                        title: 'Memproses...',
                        allowOutsideClick: false,
                        showConfirmButton: false,
                        didOpen: () => Swal.showLoading()
                    });

                    $.ajax({
                        url: url,
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            reason: reason
                        },
                        success: function(resp) {
                            Swal.fire('Sukses', (resp && resp.message) ||
                                    'Berhasil ditolak', 'success')
                                .then(() => window.location.href =
                                    "{{ URL::to($url_menu) }}");
                        },
                        error: function(xhr) {
                            var msg = (xhr.responseJSON && (xhr.responseJSON.message ||
                                    (xhr.responseJSON.errors && xhr.responseJSON
                                        .errors.reason && xhr.responseJSON.errors
                                        .reason[0]))) ||
                                xhr.statusText || 'Request gagal';
                            Swal.fire('Gagal', msg, 'error');
                        },
                        complete: function() {
                            $btn.prop('disabled', false);
                        }
                    });
                });
            });

        });
    </script>

    <script>
        $("#my-form").submit(function(e) {
            e.preventDefault();
            var formData = new FormData(this);
            console.log('ii', formData);
            var isValid = true;
            var errorMessage = '';

            var isFormValid = true;
            $('.required').each(function() {
                if ($(this).val() === '' || !$(this)[0].checkValidity()) {
                    isFormValid = false;
                    errorMessage +=
                        '<br>Lengkapi semua kolom yang wajib diisi dengan nilai yang valid.';
                    return false;
                }
            });

            if (!isValid || !isFormValid) {
                Swal.fire({
                    title: 'Gagal',
                    html: errorMessage,
                    icon: 'error',
                    showConfirmButton: true
                });
                return;
            }

            // Disable tombol submit
            const $btnSubmit = $(this).find('button[type="submit"]');
            $btnSubmit.prop('disabled', true);
            $btnSubmit.html('<i class="fas fa-spinner fa-spin me-1"></i> Menyimpan...');

            $.ajax({
                url: "{{ URL::to($url_menu) }}",
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,
                success: function(response) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Sukses',
                        text: 'Data BMI berhasil disimpan',
                        showConfirmButton: true,
                    }).then((result) => {
                        window.location.href = "{{ url($url_menu) }}";
                    });
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    var errorResponse = jqXHR.responseJSON;
                    var errorMessage = 'Terjadi kesalahan saat menyimpan data.';
                    if (errorResponse && errorResponse.message) {
                        errorMessage += '<br>' + errorResponse.message;
                    }
                    Swal.fire({
                        title: 'Gagal',
                        html: errorMessage,
                        icon: 'error',
                        showConfirmButton: true
                    });
                    console.error(textStatus, errorThrown);

                    // Enable lagi tombol submit kalau gagal
                    $btnSubmit.prop('disabled', false);
                    $btnSubmit.html(
                        '<i class="fas fa-floppy-disk me-1"></i><span class="font-weight-bold">Simpan</span>'
                    );
                }
            });
        });
    </script>
@endsection