@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <form id="form-surat" method="POST">
        @csrf
        @method('PUT')
        {{-- HEADER BUTTON --}}
        <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="history.back()" type="button">
                                <i class="fas fa-circle-left me-1"></i> Kembali
                            </button>

                            @if ($authorize->edit == '1')
                                <button type="submit" class="btn btn-primary mb-0" id="btn-save">
                                    <i class="fas fa-floppy-disk me-1"></i> Simpan
                                </button>
                            @endif

                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- FORM UTAMA --}}
        <div class="container-fluid py-4">
            <div class="row">

                {{-- ==================================== --}}
                {{-- ===========   FORM KIRI   =========== --}}
                {{-- ==================================== --}}
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-body">

                            <p class="text-uppercase text-sm">Edit Surat Keterangan</p>
                            <p class="text-danger">
                                <strong>Ket:</strong> Tanda <span class="text-danger">*</span> wajib diisi.
                            </p>
                            <hr class="horizontal dark mt-0">

                            {{-- ID (HIDDEN) --}}
                            <input type="hidden" name="id" value="{{ $surat->id }}">

                            {{-- TANGGAL PEMBUATAN --}}
                            <div class="mb-3">
                                <label class="form-control-label">Tanggal Pembuatan <span
                                        class="text-danger">*</span></label>
                                <input type="date" class="form-control required" id="tgl_buat" name="tgl_buat"
                                    value="{{ old('tgl_buat', $surat->tgl_buat) }}" required>
                            </div>

                            {{-- PILIH KARYAWAN --}}
                            <div class="mb-3">
                                <label class="form-control-label">Nama <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <input type="text" class="form-control" id="nama" name="nama"
                                        placeholder="Pilih karyawan..."
                                        value="{{ old('nama', $surat->nama_karyawan ?? ($surat->nama ?? '')) }}" readonly>
                                    <span class="input-group-text bg-primary text-light" style="cursor:pointer"
                                        data-bs-toggle="modal" data-bs-target="#karyawanModal">
                                        <i class="fas fa-search"></i>
                                    </span>
                                </div>
                            </div>

                            <input type="hidden" id="nik" name="nik" value="{{ old('nik', $surat->nik) }}">

                            {{-- INFO KARYAWAN --}}
                            <div class="mb-3">
                                <label>Tanggal Lahir</label>
                                <input type="date" id="tgl_lahir" class="form-control" readonly
                                    value="{{ old('tgl_lahir', $surat->tgl_lahir) }}">
                            </div>

                            <div class="mb-3">
                                <label>Umur</label>
                                <input type="text" id="umur" class="form-control" readonly>
                            </div>

                            {{-- TIPE SURAT --}}
                            <div class="mb-3">
                                <label class="form-control-label">Tipe Surat <span class="text-danger">*</span></label>
                                <select class="form-select required" id="tipe" name="tipe" required>
                                    <option value="">-- Pilih Tipe --</option>
                                    <option value="sehat" {{ old('tipe', $surat->tipe) == 'sehat' ? 'selected' : '' }}>
                                        SEHAT
                                    </option>
                                    <option value="sakit" {{ old('tipe', $surat->tipe) == 'sakit' ? 'selected' : '' }}>
                                        SAKIT
                                    </option>
                                </select>
                            </div>

                            {{-- ====================== --}}
                            {{-- ==== FORM SEHAT ===== --}}
                            {{-- ====================== --}}
                            <div id="form-sehat" style="display:none;">

                                <div class="mb-3">
                                    <label class="form-control-label">Keperluan <span class="text-danger">*</span></label>
                                    <textarea class="form-control" name="keperluan" id="keperluan" rows="3" placeholder="Masukkan keperluan...">{{ old('keperluan', $surat->keperluan) }}</textarea>
                                </div>

                                <div class="mb-3">
                                    <label>Keterangan <span class="text-danger">*</span></label>
                                    <select class="form-select" name="ket">
                                        <option value="1" {{ old('ket', $surat->ket) == '1' ? 'selected' : '' }}>SEHAT
                                        </option>
                                        <option value="0" {{ old('ket', $surat->ket) == '0' ? 'selected' : '' }}>TIDAK
                                            SEHAT
                                        </option>
                                    </select>
                                </div>

                                <div class="mb-3">
                                    <label>Tinggi Badan (cm)</label>
                                    <input type="number" step="0.01" class="form-control" name="tb"
                                        value="{{ old('tb', $surat->tb) }}">
                                </div>

                                <div class="mb-3">
                                    <label>Berat Badan (kg)</label>
                                    <input type="number" step="0.01" class="form-control" name="bb"
                                        value="{{ old('bb', $surat->bb) }}">
                                </div>

                                {{-- ========= INPUT TEKANAN DARAH ========= --}}
                                <div class="mb-3">
                                    <label class="form-control-label">Tekanan Darah (mmHg)</label>
                                    <div class="d-flex align-items-center gap-2">
                                        <input type="number" class="form-control" name="tekanan_sistolik"
                                            placeholder="Sistolik" min="0"
                                            value="{{ old('tekanan_sistolik', $surat->tekanan_sistolik) }}">

                                        <span style="font-size: 20px; font-weight:bold;">/</span>

                                        <input type="number" class="form-control" name="tekanan_diastolik"
                                            placeholder="Diastolik" min="0"
                                            value="{{ old('tekanan_diastolik', $surat->tekanan_diastolik) }}">
                                    </div>
                                    <small class="text-muted">Contoh: 120 / 80 mmHg</small>
                                </div>
                                {{-- ======================================== --}}

                                <div class="mb-3">
                                    <label>Golongan Darah</label>
                                    <select class="form-select" name="golongan_darah">
                                        @php $gd = old('golongan_darah', $surat->golongan_darah); @endphp
                                        <option value="">-</option>
                                        <option value="A" {{ $gd == 'A' ? 'selected' : '' }}>A</option>
                                        <option value="B" {{ $gd == 'B' ? 'selected' : '' }}>B</option>
                                        <option value="AB" {{ $gd == 'AB' ? 'selected' : '' }}>AB</option>
                                        <option value="O" {{ $gd == 'O' ? 'selected' : '' }}>O</option>
                                    </select>
                                </div>

                                <div class="mb-3">
                                    <label>Buta Warna</label>
                                    <select class="form-select" name="buta_warna">
                                        @php $bw = old('buta_warna', $surat->buta_warna); @endphp
                                        <option value="">-</option>
                                        <option value="1" {{ $bw === 1 || $bw === '1' ? 'selected' : '' }}>Ya
                                        </option>
                                        <option value="0" {{ $bw === 0 || $bw === '0' ? 'selected' : '' }}>Tidak
                                        </option>
                                        <option value="2" {{ $bw === 2 || $bw === '2' ? 'selected' : '' }}>Parsial
                                        </option>
                                    </select>
                                </div>

                            </div>

                            {{-- ====================== --}}
                            {{-- ==== FORM SAKIT ===== --}}
                            {{-- ====================== --}}
                            <div id="form-sakit" style="display:none;">

                                <div class="mb-3">
                                    <label class="form-control-label">Lama Istirahat (Hari) <span
                                            class="text-danger">*</span></label>
                                    <input type="number" class="form-control" id="lama" name="lama"
                                        min="1" value="{{ old('lama', $surat->lama) }}">
                                </div>

                                <div class="mb-3">
                                    <label>Dari Tanggal <span class="text-danger">*</span></label>
                                    <input type="date" class="form-control" id="tgl_from" name="tgl_from"
                                        value="{{ old('tgl_from', $surat->tgl_from) }}">
                                </div>

                                <div class="mb-3">
                                    <label>Sampai Tanggal <span class="text-danger">*</span></label>
                                    <input type="date" class="form-control" id="tgl_to" name="tgl_to"
                                        value="{{ old('tgl_to', $surat->tgl_to) }}">
                                </div>

                            </div>

                            <div class="mb-3">
                                <label>Pemeriksa</label>
                                <select class="form-select required" name="dokter" id="dokter" required>
                                    <option value="">-- Pilih --</option>
                                    @foreach ($dokter as $d)
                                        <option value="{{ $d->id }}"
                                            {{ old('dokter', $surat->dokter) == $d->id ? 'selected' : '' }}>
                                            {{ $d->nama }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                        </div>
                    </div>
                </div>

            </div>
        </div>

    </form>

    {{-- ============================================== --}}
    {{-- ===============  MODAL KARYAWAN  ============== --}}
    {{-- ============================================== --}}
    <div class="modal fade" id="karyawanModal" tabindex="-1" aria-labelledby="karyawanModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">List Karyawan</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">

                    <div class="table-responsive">
                        <table id="karyawanTable" class="table table-bordered table-striped" style="width:100%">
                            <thead style="background-color: #daecff;">
                                <tr>
                                    <th>Aksi</th>
                                    <th>NIK</th>
                                    <th>Nama</th>
                                    <th>Departemen</th>
                                    <th>Gender</th>
                                    <th>Tanggal Lahir</th>
                                    <th>Umur</th>
                                </tr>
                            </thead>

                            <tbody>
                                @foreach ($karyawan as $k)
                                    <tr
                                        onclick="select_pro_krywn('{{ $k->nik }}','{{ $k->name }}','{{ $k->department }}','{{ $k->gender }}','{{ $k->tgl_lahir }}')">
                                        <td>
                                            <span class="btn badge bg-success"
                                                onclick="event.stopPropagation(); select_pro_krywn('{{ $k->nik }}','{{ $k->name }}','{{ $k->department }}','{{ $k->gender }}','{{ $k->tgl_lahir }}')">
                                                <i class="fa fa-check-circle-o me-1"></i> Pilih
                                            </span>
                                        </td>

                                        <td>{{ $k->nik }}</td>
                                        <td>{{ $k->name }}</td>
                                        <td>{{ $k->department }}</td>
                                        <td>{{ $k->gender }}</td>

                                        <td class="tgl-lahir" data-tgl="{{ $k->tgl_lahir }}">{{ $k->tgl_lahir }}</td>
                                        <td class="umur-dinamis"></td>
                                    </tr>
                                @endforeach
                            </tbody>

                        </table>
                    </div>

                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        // =============================
        // SET TANGGAL DEFAULT (HANYA JIKA KOSONG)
        // =============================
        if (!document.getElementById('tgl_buat').value) {
            document.getElementById('tgl_buat').value = new Date().toISOString().split('T')[0];
        }

        // =============================
        // FUNGSI HITUNG UMUR
        // =============================
        function hitungUmur(tgl) {
            if (!tgl) return '';
            const t = new Date(tgl);
            const now = new Date();
            let age = now.getFullYear() - t.getFullYear();
            const m = now.getMonth() - t.getMonth();
            if (m < 0 || (m === 0 && now.getDate() < t.getDate())) age--;
            return age;
        }

        // =============================
        // SET UMUR AWAL (DATA EDIT)
        // =============================
        (function setInitialUmur() {
            const tgl = document.getElementById('tgl_lahir').value;
            if (tgl) {
                document.getElementById('umur').value = hitungUmur(tgl);
            }
        })();

        // =============================
        // SHOW/HIDE FORM SEHAT/SAKIT
        // =============================
        function toggleFormByType(val) {
            if (val === 'sehat') {
                $('#form-sehat').show();
                $('#form-sakit').hide();
            } else if (val === 'sakit') {
                $('#form-sehat').hide();
                $('#form-sakit').show();
            } else {
                $('#form-sehat, #form-sakit').hide();
            }
        }

        $('#tipe').on('change', function() {
            toggleFormByType(this.value);
        });

        // panggil sekali saat load (data edit)
        toggleFormByType($('#tipe').val());

        // =============================
        // PILIH KARYAWAN
        // =============================
        function select_pro_krywn(nik, nama, departemen, gender, tgl_lahir) {
            $('#nik').val(nik);
            $('#nama').val(nama);
            $('#tgl_lahir').val(tgl_lahir);
            $('#umur').val(hitungUmur(tgl_lahir));
            $('#karyawanModal').modal('hide');
        }
        window.select_pro_krywn = select_pro_krywn; // biar kepanggil dari onclick

        // =============================
        // DATATABLES + UMUR AUTO
        // =============================
        var tabel = $('#karyawanTable').DataTable({
            language: {
                search: "Cari:",
                lengthMenu: "Tampilkan _MENU_ baris",
                zeroRecords: "Tidak ada data",
                info: "Halaman _PAGE_ dari _PAGES_",
                infoEmpty: "Tidak ada data",
                infoFiltered: "(filter dari _MAX_ data)"
            }
        });

        function updateUmurRows() {
            $('.tgl-lahir').each(function() {
                const tgl = $(this).data('tgl');
                $(this).closest('tr').find('.umur-dinamis').text(hitungUmur(tgl));
            });
        }

        updateUmurRows();

        tabel.on('draw.dt', function() {
            updateUmurRows();
        });

        // =============================
        // SUBMIT FORM (UPDATE)
        // =============================
        $('#form-surat').submit(function(e) {
            e.preventDefault();
            let formData = new FormData(this);
            formData.append('_method', 'PUT');

            const submitButton = $(this).find('button[type="submit"]');
            submitButton.prop('disabled', true);

            $('#btn-save').prop('disabled', true)
                .html('<i class="fas fa-spinner fa-spin"></i> Proses...');

            $.ajax({
                url: "{{ URL::to($url_menu . '/' . $idencrypt) }}",
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,
                success: function(response) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Sukses',
                        text: 'Surat Keterangan berhasil diupdate',
                        showConfirmButton: true,
                    }).then(() => {
                        window.location.href = "{{ url($url_menu) }}";
                    });
                },
                error: function(jqXHR) {
                    var errorResponse = jqXHR.responseJSON;
                    var errorMessage = 'Terjadi kesalahan saat mengupdate data.';
                    if (errorResponse && errorResponse.message) {
                        errorMessage += '<br>' + errorResponse.message;
                    }
                    Swal.fire({
                        title: 'Gagal',
                        html: errorMessage,
                        icon: 'error',
                        showConfirmButton: true
                    });
                    submitButton.prop('disabled', false);
                }
            });
        });
    </script>
@endpush