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

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

    <form id="form-surat">
        @csrf

        {{-- 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()">
                                <i class="fas fa-circle-left me-1"></i> Kembali
                            </button>

                            @if ($authorize->add == '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">Insert 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">

                            {{-- 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" 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..." 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">

                            {{-- INFO KARYAWAN --}}
                            <div class="mb-3">
                                <label>Tanggal Lahir</label>
                                <input type="date" id="tgl_lahir" class="form-control" readonly>
                            </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">SEHAT</option>
                                    <option value="sakit">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..."></textarea>
                                </div>

                                <div class="mb-3">
                                    <label>Tinggi Badan (cm) <span class="text-danger">*</span></label>
                                    <input type="number" step="0.01" class="form-control" name="tb">
                                </div>

                                <div class="mb-3">
                                    <label>Berat Badan (kg) <span class="text-danger">*</span></label>
                                    <input type="number" step="0.01" class="form-control" name="bb">
                                </div>

                                {{-- ========= INPUT TEKANAN DARAH ========= --}}
                                <div class="mb-3">
                                    <label class="form-control-label">Tekanan Darah (mmHg) <span
                                            class="text-danger">*</span></label>
                                    <div class="d-flex align-items-center gap-2">
                                        <input type="number" class="form-control" name="tekanan_sistolik"
                                            placeholder="Sistolik" min="0">

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

                                        <input type="number" class="form-control" name="tekanan_diastolik"
                                            placeholder="Diastolik" min="0">
                                    </div>
                                    <small class="text-muted">Contoh: 120 / 80 mmHg</small>
                                </div>
                                {{-- ======================================== --}}

                                <div class="mb-3">
                                    <label>Golongan Darah <span class="text-danger">*</span></label>
                                    <select class="form-select" name="golongan_darah">
                                        <option value="">-</option>
                                        <option>A</option>
                                        <option>B</option>
                                        <option>AB</option>
                                        <option>O</option>
                                    </select>
                                </div>

                                <div class="mb-3">
                                    <label>Buta Warna <span class="text-danger">*</span></label>
                                    <select class="form-select" name="buta_warna">
                                        <option value="">-</option>
                                        <option value="1">Ya</option>
                                        <option value="0">Tidak</option>
                                        <option value="2">Parsial</option>
                                    </select>
                                </div>

                                <div class="mb-3">
                                    <label>Keterangan <span class="text-danger">*</span></label>
                                    <select class="form-select" name="ket">
                                        <option value="1">SEHAT</option>
                                        <option value="0">TIDAK SEHAT</option>
                                    </select>
                                </div>

                            </div>

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

                                <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">
                                </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">
                                </div>

                                <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" readonly>
                                    <small class="text-muted">Otomatis terisi dari tanggal awal.</small>
                                </div>

                            </div>

                            <div class="mb-3">
                                <label>Pemeriksa <span class="text-danger">*</span></label>
                                <select class="form-control required" name="dokter" id="dokter" required>
                                    <option value="">-- Pilih --</option>
                                    @foreach ($dokter as $d)
                                        <option value="{{ $d->id }}">{{ $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
        // =============================
        document.getElementById('tgl_buat').value = new Date().toISOString().split('T')[0];

        // =============================
        // SHOW/HIDE FORM SEHAT/SAKIT
        // =============================
        $('#tipe').on('change', function() {
            if (this.value === 'sehat') {
                $('#form-sehat').show();
                $('#form-sakit').hide();
            } else if (this.value === 'sakit') {
                $('#form-sehat').hide();
                $('#form-sakit').show();
            } else {
                $('#form-sehat, #form-sakit').hide();
            }
        });

        // =============================
        // 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');
        }

        function hitungLamaIstirahat() {
            const fromVal = $('#tgl_from').val();
            const toVal = $('#tgl_to').val();
            const $lama = $('#lama');

            if (fromVal && toVal) {
                const start = new Date(fromVal);
                const end = new Date(toVal);

                // selisih milidetik
                const diffTime = end.getTime() - start.getTime();
                // konversi ke hari
                const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24)) + 1; // +1 biar inklusif

                if (diffDays > 0) {
                    $lama.val(diffDays);
                } else {
                    $lama.val('');
                    // optional: kasih informasi
                    Swal.fire({
                        icon: 'warning',
                        title: 'Tanggal tidak valid',
                        text: 'Tanggal "Sampai" harus lebih besar atau sama dengan tanggal "Dari".'
                    });
                }
            } else {
                // kalau salah satu tanggal kosong, kosongkan lama
                $lama.val('');
            }
        }
        $('#tgl_from, #tgl_to').on('change', function() {
            hitungLamaIstirahat();
        });

        function hitungUmur(tgl) {
            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;
        }

        // =============================
        // 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
        // =============================
        $('#form-surat').submit(function(e) {
            e.preventDefault();

            let formData = new FormData(this);

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

            $.ajax({
                url: "{{ URL::to($url_menu) }}",
                method: "POST",
                data: formData,
                processData: false,
                contentType: false,
                success: function() {
                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil',
                        text: 'Surat keterangan berhasil disimpan'
                    }).then(() => {
                        window.location.href = "{{ url($url_menu) }}";
                    });
                },
                error: function() {
                    Swal.fire('Error', 'Terjadi kesalahan saat menyimpan data', 'error');
                    $('#btn-save').prop('disabled', false)
                        .html('<i class="fas fa-floppy-disk me-1"></i> Simpan');
                }
            });

        });
    </script>
@endpush