@extends('layouts.template')
@section('content')
<div class="bg-white w-full shadow rounded-2xl p-4">
    {{-- Card Header --}}
    <div class="flex items-center justify-between mb-4">
        <div>

            <h3 class="text-xl font-semibold text-gray-800">Tambah Inseminasi Buatan</h3>
            <x-breadcrumb />

        </div>
    </div>

    {{-- Table --}}
    <div class="overflow-x-auto">
    <form action="" method="POST" class="flex-1 overflow-auto space-y-6">
                @csrf
                @if(request()->route('id'))

                    <div>
                        <label for="kejadian" class="block text-sm font-medium text-gray-700">Id Kejadian</label>
                         <input type="text" name="kejadian" id="kejadian" readonly value="{{request()->route('id')}}"
                           class="mt-1 block w-full border border-gray-300 rounded-lg shadow-sm px-4 py-2 focus:ring-blue-500 focus:border-blue-500" value="{{request()->route('id')}}">
                    </div>
                @else
                    <div>
                        <label for="kejadian" class="block text-sm font-medium text-gray-700">Id Kejadian</label>
                        <select id="kejadian" name="kejadian" class="w-full rounded-lg shadow-sm border border-gray-300" required>
                        <!-- Options loaded by AJAX -->
                        </select>
                    </div>
                @endif
                <div>
                    <label for="ticket" class="block text-sm font-medium text-gray-700">Ticket</label>
                    <select id="ticket" name="ticket" class="w-full rounded-lg shadow-sm border border-gray-300">
                        <!-- Options loaded by AJAX -->
                    </select>
                </div>
                <div>
                    <label for="staff" class="block text-sm font-medium text-gray-700">No Dokumen</label>
                    <input type="text" name="dokumen" id="dokumen" placeholder="No Dokumen" required
                           class="mt-1 block w-full border border-gray-300 rounded-lg shadow-sm px-4 py-2 focus:ring-blue-500 focus:border-blue-500" >
                </div>

                <div>
                    <label for="staff" class="block text-sm font-medium text-gray-700">Petugas Penanggung Jawab</label>
                    <select id="staff" name="staff" class="w-full rounded-lg shadow-sm border border-gray-300" required>
                    </select>
                </div>
                <div>
                    <label for="pejantan" class="block text-sm font-medium text-gray-700">Pejantan (Straw)</label>
                    <select id="pejantan" name="pejantan" class="w-full rounded-lg shadow-sm border border-gray-300" required>
                    </select>
                </div>
                <div>
                    <label for="status" class="block text-sm font-medium text-gray-700">Status</label>
                    <!-- <input type="text" name="status" id="status"
                    class="mt-1 block w-full border border-gray-300 rounded-lg shadow-sm px-4 py-2 focus:ring-blue-500 focus:border-blue-500" value ="Belum Ada Tindakan"> -->
                    <select id="status" readonly name="status" class="w-full rounded-lg shadow-sm border border-gray-300">
                        <option value="Telah Dilakukan Tindakan">Telah Dilakukan Tindakan</option>
                        <!-- <option value="Belum Ada Hasil">Belum Ada Hasil</option>
                        <option value="sukses">Inseminasi Berhasil</option>
                        <option value="gagal">Inseminasi Gagal</option> -->
                    </select>
                </div>
                <div>
                    <label for="keterangan" class="block text-sm font-medium text-gray-700">Keterangan</label>
                    <input type="text" name="keterangan" id="keterangan"
                           class="mt-1 block w-full border border-gray-300 rounded-lg shadow-sm px-4 py-2 focus:ring-blue-500 focus:border-blue-500">
                </div>

                <div>
                    <label for="tanggal" class="block text-sm font-medium text-gray-700">Tanggal Diperbarui</label>
                    <input type="date" name="tanggal" id="tanggal" required
                           class="mt-1 block w-full border border-gray-300 rounded-lg shadow-sm px-4 py-2 focus:ring-blue-500 focus:border-blue-500">
                </div>

                <div class="pt-4">
                    <button type="submit"
                            class="bg-blue-600 text-white px-3 py-2 rounded-xl hover:bg-blue-700 transition">
                        Save IB
                    </button>
                </div>
            </form>

    </div>
</div>

@stop
@push('script')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    let id = window.location.pathname.split("/")[2];
    
    $(document).ready(function() {
        if(id){
        }
        else{
            $('#kejadian').select2({
                placeholder: 'Cari Kejadian...',
                minimumInputLength: 0,
                ajax: {
                    url: '{{route('kejadian.search')}}',
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        return {
                    q: params.term // search input
                };
                },
                processResults: function (data) {
                    return {
                        results: data.map(item => ({
                            id: item.id_kejadian,
                            text: item.id_kejadian
                        }))
                    };
                },
                cache: true
                },
            });
        }   
    $('#staff').select2({
        placeholder: 'Cari Staff...',
        minimumInputLength: 0,
        ajax: {
            url: '{{route('staff.search')}}',
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    q: params.term // search input
                };
            },
            processResults: function (data) {
                return {
                    results: data.map(item => ({
                        id: item.id_staff,
                        text: item.text
                    }))
                };
            },
            cache: true
        },
    });
    $('#pejantan').select2({
        placeholder: 'Cari Pejantan...',
        minimumInputLength: 0,
        ajax: {
            url: '{{route('pejantan.search')}}',
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    q: params.term // search input
                };
            },
            processResults: function (data) {
                return {
                    results: data.map(item => ({
                        id: item.id_pejantan,
                        text: item.text
                    }))
                };
            },
            cache: true
        },
    });
    $('#ticket').select2({
        placeholder: 'Cari Ticket...',
        minimumInputLength: 0,
        ajax: {
            url: '{{route('ticket.search')}}',
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    q: params.term,
                    kejadian : $('#kejadian').val(),
                    jenis:'IB', // search input
                };
            },
            processResults: function (data) {
                return {
                    results: data.map(item => ({
                        id: item.id_ticket,
                        text: item.text,
                        peternak: item.id_peternak,
                        nama : item.nama,
                    })),
                };
            },
            cache: true
        },
    });
    $('#ticket').on('select2:select', function (e) {
        let d = e.params.data;

        $('#peternak').val(d.peternak);
        // $('#no_hp').val(d.no_hp);
        // $('#alamat').val(d.alamat);
    });
});
</script>

@endpush