@extends('layouts.apex')

@section('title', 'Cek Anco')

@section('header-title', 'Cek Anco')

@section('content')
<div style="margin-bottom: 1.5rem; display: flex; justify-content: space-between; align-items: center;">
    <div>
        <button onclick="openModal()" class="btn btn-primary">
            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
            </svg>
            Tambah Cek Anco
        </button>
    </div>
</div>

<!-- Cek Anco List -->
<div class="card">
    <div class="card-header">
        <h2 class="card-title">Riwayat Cek Anco</h2>
    </div>
    <div class="card-body">
        <table id="cekAncoTable" class="table table-striped table-bordered" style="width:100%">
            <thead>
                <tr>
                    <th>No</th>
                    <th>No Bukti</th>
                    <th>Kolam</th>
                    <th>Tanggal</th>
                    <th>Jam Pemberian</th>
                    <th>Jam Cek</th>
                    <th>Jumlah Pakan</th>
                    <th>Anco 1</th>
                    <th>Anco 2</th>
                    <th>Status</th>
                    <th>Aksi</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

<!-- Modal Form (Create) -->
<div id="cekAncoModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">Tambah Cek Anco</h3>
                <button type="button" class="modal-close" onclick="closeModal()">&times;</button>
            </div>
            <form action="{{ route('cek-anco.store') }}" method="POST" id="createForm">
                @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <label class="form-label">No Bukti</label>
                        <select name="no_bukti" id="noBukti" class="form-control form-select" required>
                            <option value="">-- Pilih / Auto Generate --</option>
                        </select>
                        <small class="text-muted">Pilih nomor bukti yang sudah ada atau biarkan kosong untuk generate baru</small>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Kolam *</label>
                        <select name="kolam" id="kolam" class="form-control form-select" required>
                            <option value="">Pilih Kolam</option>
                            @foreach($kolams as $kolam)
                            <option value="{{ $kolam->nama }}">{{ $kolam->nama }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Tanggal *</label>
                        <input type="text" name="tanggal" id="tanggal" class="form-control datepicker" placeholder="dd-mm-yyyy" value="{{ today()->format('d-m-Y') }}" required>
                        <small class="text-muted">Format: dd-mm-yyyy (contoh: 28-05-2026)</small>
                    </div>

                    <div class="grid grid-cols-2" style="gap: 1rem;">
                        <div class="form-group">
                            <label class="form-label">Waktu Pemberian *</label>
                            <input type="time" name="waktu_pemberian" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Waktu Cek *</label>
                            <input type="time" name="waktu_cek" class="form-control" required>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Jumlah Pakan (KG) *</label>
                        <input type="number" step="0.1" name="jumlah_pakan" class="form-control" placeholder="0.0" required>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Status Anco 1 *</label>
                        <select name="anco_1_status" class="form-control form-select" required>
                            <option value="habis">Habis (< 10%)</option>
                            <option value="sedikit">Sisa Sedikit (10-50%)</option>
                            <option value="banyak">Sisa Banyak (> 50%)</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Status Anco 2 *</label>
                        <select name="anco_2_status" class="form-control form-select" required>
                            <option value="habis">Habis (< 10%)</option>
                            <option value="sedikit">Sisa Sedikit (10-50%)</option>
                            <option value="banyak">Sisa Banyak (> 50%)</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Keterangan</label>
                        <textarea name="keterangan" class="form-control" rows="3" placeholder="Keterangan tambahan..."></textarea>
                    </div>

                    <div style="background-color: var(--gray-50); padding: 1rem; border-radius: 0.5rem; margin-bottom: 1rem;">
                        <p style="font-size: 0.75rem; color: var(--gray-500); margin-bottom: 0.5rem; font-weight: 600;">KONSUMSI PAKAN DI ANCO</p>
                        <div style="display: flex; gap: 1rem; font-size: 0.875rem;">
                            <div style="display: flex; align-items: center; gap: 0.25rem;">
                                <div style="width: 16px; height: 16px; background-color: #d1fae5; border-radius: 50%;"></div>
                                <span>Habis: &lt;10%</span>
                            </div>
                            <div style="display: flex; align-items: center; gap: 0.25rem;">
                                <div style="width: 16px; height: 16px; background-color: #fef3c7; border-radius: 50%;"></div>
                                <span>Sisa Sedikit: 10% - 50%</span>
                            </div>
                            <div style="display: flex; align-items: center; gap: 0.25rem;">
                                <div style="width: 16px; height: 16px; background-color: #fee2e2; border-radius: 50%;"></div>
                                <span>Sisa Banyak: &gt;50%</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" onclick="closeModal()">Batal</button>
                    <button type="submit" class="btn btn-primary">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Edit -->
<div id="editModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">Edit Cek Anco</h3>
                <button type="button" class="modal-close" onclick="closeEditModal()">&times;</button>
            </div>
            <form id="editForm" action="#" method="POST">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <input type="hidden" id="editId">

                    <div class="form-group">
                        <label class="form-label">No Bukti</label>
                        <input type="text" id="editNoBukti" class="form-control" readonly style="background-color: #f8f9fa;">
                    </div>

                    <div class="form-group">
                        <label class="form-label">Kolam *</label>
                        <select name="kolam" id="editKolam" class="form-control form-select" required>
                            <option value="">Pilih Kolam</option>
                            @foreach($kolams as $kolam)
                            <option value="{{ $kolam->nama }}">{{ $kolam->nama }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Tanggal *</label>
                        <input type="text" name="tanggal" id="editTanggal" class="form-control datepicker" placeholder="dd-mm-yyyy" required>
                        <small class="text-muted">Format: dd-mm-yyyy</small>
                    </div>

                    <div class="grid grid-cols-2" style="gap: 1rem;">
                        <div class="form-group">
                            <label class="form-label">Waktu Pemberian *</label>
                            <input type="time" name="waktu_pemberian" id="editWaktuPemberian" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Waktu Cek *</label>
                            <input type="time" name="waktu_cek" id="editWaktuCek" class="form-control" required>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Jumlah Pakan (KG) *</label>
                        <input type="number" step="0.1" name="jumlah_pakan" id="editJumlahPakan" class="form-control" required>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Status Anco 1 *</label>
                        <select name="anco_1_status" id="editAnco1Status" class="form-control form-select" required>
                            <option value="habis">Habis (< 10%)</option>
                            <option value="sedikit">Sisa Sedikit (10-50%)</option>
                            <option value="banyak">Sisa Banyak (> 50%)</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Status Anco 2 *</label>
                        <select name="anco_2_status" id="editAnco2Status" class="form-control form-select" required>
                            <option value="habis">Habis (< 10%)</option>
                            <option value="sedikit">Sisa Sedikit (10-50%)</option>
                            <option value="banyak">Sisa Banyak (> 50%)</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Keterangan</label>
                        <textarea name="keterangan" id="editKeterangan" class="form-control" rows="3"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" onclick="closeEditModal()">Batal</button>
                    <button type="submit" class="btn btn-primary">Update</button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<script>
$(document).ready(function() {
    // Initialize Select2
    $('#kolam, #editKolam').select2({
        theme: 'bootstrap4',
        placeholder: 'Pilih Kolam',
        allowClear: true,
        width: '100%'
    });

    // Date picker with dd-mm-yyyy format
    $('.datepicker').datepicker({
        format: 'dd-mm-yyyy',
        autoclose: true,
        todayHighlight: true
    });

    $('#cekAncoTable').DataTable({
        processing: true,
        serverSide: true,
        pageLength: 10,
        lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
        responsive: true,
        dom: 'Bfrtip',
        buttons: [
            'copy',
            'csv',
            'excel',
            'pdf',
            'print'
        ],
        ajax: {
            url: '{{ route('cek-anco.data') }}',
            type: 'GET',
            data: function(d) {
                d._token = '{{ csrf_token() }}';
            }
        },
        columns: [
            { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
            { data: 'no_bukti', name: 'no_bukti', searchable: true },
            { data: 'kolam', name: 'kolam', searchable: true },
            { data: 'tanggal_format', name: 'tanggal', orderable: true, searchable: true },
            { data: 'waktu_pemberian_format', name: 'waktu_pemberian', orderable: false },
            { data: 'waktu_cek_format', name: 'waktu_cek', orderable: false },
            { data: 'jumlah_pakan_format', name: 'jumlah_pakan', orderable: true },
            { data: 'anco_1_badge', name: 'anco_1_status', orderable: false, searchable: false },
            { data: 'anco_2_badge', name: 'anco_2_status', orderable: false, searchable: false },
            { data: 'consumption_badge', name: 'average_consumption', orderable: true, searchable: false },
            { data: 'action', name: 'action', orderable: false, searchable: false }
        ],
        order: [[3, 'desc']],
        language: {
            url: 'https://cdn.datatables.net/plug-ins/1.13.6/i18n/id.json'
        }
    });

    // Generate no bukti when modal opens and tanggal changes
    $('#tanggal').on('change', function() {
        loadExistingNoBukti();
    });

    // Create form submit
    $('#createForm').on('submit', function(e) {
        e.preventDefault();
        const form = $(this);
        const formData = new FormData(this);

        // If no_bukti is empty (generate new selected), get next no_bukti from server
        const noBukti = $('#noBukti').val();
        if (!noBukti) {
            const tanggal = $('#tanggal').val();
            // Block UI and get next no_bukti
            $.ajax({
                url: '{{ route('cek-anco.next-no-bukti') }}',
                type: 'GET',
                data: { tanggal: tanggal },
                success: function(response) {
                    formData.set('no_bukti', response.next_no_bukti);
                    submitCreateForm(formData);
                },
                error: function() {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Gagal generate nomor bukti!'
                    });
                }
            });
        } else {
            submitCreateForm(formData);
        }
    });

    function submitCreateForm(formData) {
        $.ajax({
            url: '{{ route('cek-anco.store') }}',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                closeModal();
                $('#cekAncoTable').DataTable().ajax.reload();
                Swal.fire({
                    icon: 'success',
                    title: 'Berhasil',
                    text: response.success || response.message || 'Data berhasil disimpan!',
                    timer: 2000,
                    showConfirmButton: false
                });
            },
            error: function(xhr) {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: xhr.responseJSON?.message || 'Terjadi kesalahan!'
                });
            }
        });
    }

    // Edit form submit
    $('#editForm').on('submit', function(e) {
        e.preventDefault();
        const id = $('#editId').val();
        const form = $(this);
        const formData = new FormData(this);

        $.ajax({
            url: '{{ route('cek-anco.update', 'id') }}'.replace('id', id),
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            success: function(response) {
                closeEditModal();
                $('#cekAncoTable').DataTable().ajax.reload();
                Swal.fire({
                    icon: 'success',
                    title: 'Berhasil',
                    text: response.success || response.message || 'Data berhasil diupdate!',
                    timer: 2000,
                    showConfirmButton: false
                });
            },
            error: function(xhr) {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: xhr.responseJSON?.message || 'Terjadi kesalahan!'
                });
            }
        });
    });
});

function updateNoBukti() {
    const tanggal = $('#tanggal').val();
    if (!tanggal) {
        $('#noBukti').val('');
        return;
    }

    $.ajax({
        url: '{{ route('cek-anco.next-no-bukti') }}',
        type: 'GET',
        data: { tanggal: tanggal },
        success: function(response) {
            // Add new option and select it
            const exists = $('#noBukti option[value="' + response.next_no_bukti + '"]').length > 0;
            if (!exists) {
                $('#noBukti').append('<option value="' + response.next_no_bukti + '">' + response.next_no_bukti + ' (BARU)</option>');
            }
            $('#noBukti').val(response.next_no_bukti);
        },
        error: function() {
            $('#noBukti').val('');
        }
    });
}

function loadExistingNoBukti() {
    const tanggal = $('#tanggal').val();
    if (!tanggal) {
        $('#noBukti').html('<option value="">-- Pilih / Auto Generate --</option>');
        return;
    }

    $.ajax({
        url: '{{ route('cek-anco.existing-no-bukti') }}',
        type: 'GET',
        data: { tanggal: tanggal },
        success: function(response) {
            let options = '<option value="">-- Pilih / Auto Generate --</option>';
            if (response.no_bukti_list && response.no_bukti_list.length > 0) {
                options += '<option value="">-- GENERATE BARU --</option>';
                response.no_bukti_list.forEach(function(noBukti) {
                    options += '<option value="' + noBukti + '">' + noBukti + '</option>';
                });
            }
            $('#noBukti').html(options);
            // Auto-select generate new (empty value triggers new on submit)
            $('#noBukti').val('');
        },
        error: function() {
            $('#noBukti').html('<option value="">-- Pilih / Auto Generate --</option>');
        }
    });
}

function openModal() {
    document.getElementById('cekAncoModal').classList.add('show');
    document.getElementById('createForm').reset();
    $('#tanggal').val('{{ today()->format("d-m-Y") }}');
    $('#kolam').val(null).trigger('change');
    loadExistingNoBukti();
}

function closeModal() {
    document.getElementById('cekAncoModal').classList.remove('show');
}

function closeEditModal() {
    document.getElementById('editModal').classList.remove('show');
}

function editRecord(id) {
    $.ajax({
        url: '{{ route('cek-anco.edit', 'id') }}'.replace('id', id),
        type: 'GET',
        success: function(response) {
            if (response.success) {
                const data = response.data;
                $('#editId').val(data.id);
                $('#editNoBukti').val(data.no_bukti);
                $('#editKolam').val(data.kolam).trigger('change');
                $('#editTanggal').val(data.tanggal);
                $('#editWaktuPemberian').val(data.waktu_pemberian);
                $('#editWaktuCek').val(data.waktu_cek);
                $('#editJumlahPakan').val(data.jumlah_pakan);
                $('#editAnco1Status').val(data.anco_1_status);
                $('#editAnco2Status').val(data.anco_2_status);
                $('#editKeterangan').val(data.keterangan || '');

                $('#editForm').attr('action', '{{ route('cek-anco.update', 'id') }}'.replace('id', id));
                document.getElementById('editModal').classList.add('show');
            } else {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: response.message || 'Data tidak ditemukan!'
                });
            }
        },
        error: function(xhr) {
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: 'Terjadi kesalahan saat mengambil data!'
            });
        }
    });
}

function deleteRecord(id) {
    Swal.fire({
        title: 'Hapus Data?',
        text: 'Data yang dihapus tidak dapat dikembalikan!',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: 'Ya, Hapus!',
        cancelButtonText: 'Batal'
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: '{{ route('cek-anco.destroy', 'id') }}'.replace('id', id),
                type: 'POST',
                data: {
                    _method: 'DELETE',
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    $('#cekAncoTable').DataTable().ajax.reload();
                    Swal.fire({
                        icon: 'success',
                        title: 'Terhapus!',
                        text: response.message || 'Data berhasil dihapus!'
                    });
                },
                error: function(xhr) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: xhr.responseJSON?.message || 'Terjadi kesalahan!'
                    });
                }
            });
        }
    });
}

// Close modals on outside click
window.onclick = function(event) {
    const createModal = document.getElementById('cekAncoModal');
    const editModal = document.getElementById('editModal');
    if (event.target == createModal) {
        closeModal();
    }
    if (event.target == editModal) {
        closeEditModal();
    }
}
</script>
@endpush
@endsection