@extends('base.layout')

@push('styles')
<style>
    .bio-summary-card {
        border-left: 4px solid #188ae2;
    }
    .cabinet-visual {
        border: 2px solid #2d3e50;
        border-radius: 12px;
        background: #f7fbff;
        padding: 15px;
        margin-bottom: 18px;
    }
    .rack-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 12px;
    }
    .bio-step-panel {
        border: 1px solid #d7e3ef;
        border-radius: 8px;
        background: #ffffff;
        padding: 12px;
        margin-bottom: 14px;
    }
    .bio-step-title {
        font-weight: 700;
        color: #1b3a57;
        margin-bottom: 10px;
    }
    .bio-choice-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 10px;
    }
    .bio-choice-wrap {
        position: relative;
    }
    .bio-choice {
        display: block;
        width: 100%;
        min-height: 92px;
        border: 1px solid #d7e3ef;
        border-radius: 6px;
        background: #f8fbff;
        color: #1b3a57;
        text-align: left;
        padding: 10px;
        cursor: pointer;
    }
    .bio-choice strong,
    .bio-choice span,
    .bio-choice small {
        display: block;
    }
    .bio-choice small {
        color: #6c757d;
        margin-top: 3px;
    }
    .bio-choice.active,
    .bio-number.active {
        border-color: #188ae2;
        background: #eaf5ff;
        box-shadow: inset 0 0 0 1px #188ae2;
    }
    .bio-delete-form {
        position: absolute;
        top: 8px;
        right: 8px;
    }
    .bio-number-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
        gap: 8px;
    }
    .bio-number {
        border: 1px solid #d7e3ef;
        border-radius: 6px;
        background: #f8fbff;
        color: #1b3a57;
        padding: 9px 6px;
        cursor: pointer;
        text-align: center;
    }
    .rack-box {
        border: 1px solid #d7e3ef;
        border-radius: 10px;
        background: #ffffff;
        padding: 12px;
    }
    .rack-header {
        font-weight: 700;
        color: #1b3a57;
        margin-bottom: 4px;
    }
    .slot-grid {
        display: grid;
        grid-template-columns: repeat(8, minmax(26px, 1fr));
        gap: 6px;
        margin-top: 10px;
    }
    .shelf-section {
        border: 1px dashed #bfd3e8;
        border-radius: 8px;
        padding: 8px;
        margin-top: 8px;
        background: #fbfdff;
    }
    .tube-grid {
        display: grid;
        grid-template-columns: repeat(10, minmax(24px, 1fr));
        gap: 5px;
        margin-top: 8px;
    }
    .slot-btn {
        border: 1px solid #bfd3e8;
        background: #f4f9ff;
        color: #134068;
        border-radius: 5px;
        font-size: 11px;
        line-height: 1;
        padding: 7px 0;
        cursor: pointer;
        text-align: center;
        width: 100%;
        min-height: 34px;
    }
    .slot-btn.slot-filled {
        background: #fce8e8;
        border-color: #e7adad;
        color: #8d1f1f;
        cursor: pointer;
    }
    .slot-btn span,
    .slot-btn small {
        display: block;
    }
    .oldest-highlight {
        border: 1px solid #ffd58f;
        background: #fff8ea;
        border-radius: 10px;
        padding: 12px;
    }
    #biorepoTable tfoot input {
        width: 100%;
        min-width: 90px;
        font-size: 11px;
        padding: 4px 6px;
    }
</style>
@endpush

@section('content')
<div class="wrapper">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <div class="page-title-box">
                    <div class="btn-group pull-right">
                        <ol class="breadcrumb hide-phone p-0 m-0">
                            <li class="breadcrumb-item active">Biorepository</li>
                        </ol>
                    </div>
                    <h4 class="page-title">Biorepository Lab Mikrobiologi</h4>
                </div>
            </div>
        </div>

        @if(session('success'))
        <div class="row">
            <div class="col-lg-12">
                <div class="alert alert-success">{{ session('success') }}</div>
            </div>
        </div>
        @endif

        @if($errors->any())
        <div class="row">
            <div class="col-lg-12">
                <div class="alert alert-danger">
                    @foreach($errors->all() as $err)
                        <div>{{ $err }}</div>
                    @endforeach
                </div>
            </div>
        </div>
        @endif

        <div class="row">
            <div class="col-md-4">
                <div class="card-box bio-summary-card">
                    <h5>Total Lemari</h5>
                    <h3>{{ $totalCabinets }}</h3>
                    <button type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#modalTambahLemari">Tambah Lemari</button>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card-box bio-summary-card">
                    <h5>Total Rack</h5>
                    <h3>{{ $totalRacks }}</h3>
                    <button type="button" class="btn btn-sm btn-info" data-toggle="modal" data-target="#modalTambahRack">Tambah Rack</button>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card-box bio-summary-card">
                    <h5>Total Spesimen</h5>
                    <h3>{{ $totalSpecimens }}</h3>
                    <button type="button" class="btn btn-sm btn-dark" id="btnOpenListTab">Lihat List</button>
                </div>
            </div>
        </div>

        <div class="card-box">
            <ul class="nav nav-tabs m-b-20">
                <li class="nav-item">
                    <a href="#tabVisual" data-toggle="tab" aria-expanded="true" class="nav-link active">Visualisasi</a>
                </li>
                <li class="nav-item">
                    <a href="#tabList" data-toggle="tab" aria-expanded="false" class="nav-link" id="tabListLink">List Biorepository</a>
                </li>
            </ul>

            <div class="tab-content">
                <div class="tab-pane active" id="tabVisual">
                    <h4 class="m-b-15">Spesimen dengan Waktu Simpan Paling Lama</h4>
                    @if($oldestSpecimen)
                        <div class="oldest-highlight m-b-20">
                            <strong>{{ $oldestSpecimen->specimen_code }}</strong> - {{ $oldestSpecimen->bacteria_name ?? $oldestSpecimen->specimen_name }}<br>
                            Lemari: {{ $oldestSpecimen->cabinet->name ?? '-' }} | Rack: {{ $oldestSpecimen->rack->name ?? '-' }}<br>
                            Disimpan sejak: {{ $oldestSpecimen->stored_at }} ({{ $oldestStorageDays }} hari)
                        </div>
                    @else
                        <div class="alert alert-warning m-b-20">Belum ada data spesimen.</div>
                    @endif

                    <h4 class="m-b-20">Visualisasi Lemari, Rack, Slot, Shelf, Box, dan Tube</h4>
                    <p class="text-muted">Pilih posisi dari lemari sampai box. Tube biru bisa diisi, tube merah sudah terisi.</p>

                    @livewire('biorepository-visual')
                </div>

                <div class="tab-pane" id="tabList">
                    <h4 class="m-b-20">List Biorepository</h4>
                    <div class="table-responsive">
                        <table id="biorepoTable" class="table table-bordered table-striped table-sm">
                            <thead>
                                <tr>
                                    <th>Kode Sample</th>
                                    <th>Kategori</th>
                                    <th>Shelf</th>
                                    <th>Rack</th>
                                    <th>Slot</th>
                                    <th>Box</th>
                                    <th>Tube</th>
                                    <th>Bactery</th>
                                    <th>Strain</th>
                                    <th>Lemari</th>
                                    <th>Nama Rack</th>
                                    <th>Tgl Simpan</th>
                                    <th>ATCC</th>
                                    <th>Input By</th>
                                    <th>View</th>
                                    <th>Aksi</th>
                                </tr>
                            </thead>
                            <tfoot>
                                <tr>
                                    <th>Kode Sample</th>
                                    <th>Kategori</th>
                                    <th>Shelf</th>
                                    <th>Rack</th>
                                    <th>Slot</th>
                                    <th>Box</th>
                                    <th>Tube</th>
                                    <th>Bactery</th>
                                    <th>Strain</th>
                                    <th>Lemari</th>
                                    <th>Nama Rack</th>
                                    <th>Tgl Simpan</th>
                                    <th>ATCC</th>
                                    <th>Input By</th>
                                    <th>View</th>
                                    <th></th>
                                </tr>
                            </tfoot>
                            <tbody>
                                @foreach($specimenRows as $row)
                                    <tr>
                                        <td>{{ $row->specimen_code }}</td>
                                        <td>{{ $row->category_storage }}</td>
                                        <td>{{ $row->shelf_number }}</td>
                                        <td>{{ $row->rack_number }}</td>
                                        <td>{{ $row->slot_number }}</td>
                                        <td>{{ $row->box_number }}</td>
                                        <td>{{ $row->tube_number }}</td>
                                        <td>{{ $row->bacteria_name ?? $row->specimen_name }}</td>
                                        <td>{{ $row->strain }}</td>
                                        <td>{{ $row->cabinet->code ?? '-' }}</td>
                                        <td>{{ $row->rack->name ?? '-' }}</td>
                                        <td>{{ $row->stored_at }}</td>
                                        <td>{{ $row->atcc }}</td>
                                        <td>{{ $row->input_by }}</td>
                                        <td>
                                            @if ($row->sampleid)
                                                <a href="{{ url('/mikro/'.$row->sampleid.'/expertise?return_to=biorepository') }}" class="btn btn-sm btn-info">View</a>
                                            @else
                                                -
                                            @endif
                                        </td>
                                        <td class="text-center">
                                            <form method="POST" action="{{ route('biorepository.deleteSpecimen', $row->id) }}" class="d-inline js-delete-specimen">
                                                @csrf
                                                <button type="submit" class="btn btn-sm btn-danger">Hapus</button>
                                            </form>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="modalTambahLemari" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Tambah Lemari</h4>
            </div>
            <form method="POST" action="{{ route('biorepository.storeCabinet') }}">
                @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <label>Kode Lemari</label>
                        <input type="text" name="code" class="form-control" placeholder="LMR-A01" required>
                    </div>
                    <div class="form-group">
                        <label>Nama Lemari</label>
                        <input type="text" name="name" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label>Lokasi</label>
                        <input type="text" name="location" class="form-control" placeholder="Ruang kultur 1">
                    </div>
                    <div class="form-group m-b-0">
                        <label>Catatan</label>
                        <textarea name="notes" class="form-control" rows="2"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                    <button class="btn btn-primary" type="submit">Simpan Lemari</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div id="modalTambahRack" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Tambah Rack</h4>
            </div>
            <form method="POST" action="{{ route('biorepository.storeRack') }}">
                @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <label>Pilih Lemari</label>
                        <select name="cabinet_id" class="form-control" required>
                            <option value="">-- Pilih --</option>
                            @foreach($cabinetOptions as $cab)
                                <option value="{{ $cab->id }}">{{ $cab->code }} - {{ $cab->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label>Kode Rack</label>
                            <input type="text" name="code" class="form-control" placeholder="R01" required>
                        </div>
                        <div class="form-group col-md-6">
                            <label>Nama Rack</label>
                            <input type="text" name="name" class="form-control" required>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label>Jumlah Slot per Rack</label>
                            <input type="number" name="slot_count" class="form-control" min="1" max="20" value="1" required>
                        </div>
                        <div class="form-group col-md-6">
                            <label>Jumlah Shelf per Slot (4-6)</label>
                            <input type="number" name="level" class="form-control" min="4" max="6" value="4" required>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label>Jumlah Box per Shelf</label>
                            <input type="number" name="box_number" class="form-control" min="1" max="20" value="1" required>
                        </div>
                        <div class="form-group col-md-6">
                            <label>Tube per Box (16-100)</label>
                            <input type="number" name="capacity" class="form-control" min="16" max="100" value="16" required>
                        </div>
                    </div>
                    <small class="text-muted">Rack number dibuat otomatis oleh sistem. Struktur: lemari -> rack -> slot -> shelf -> box -> tube.</small>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                    <button class="btn btn-info" type="submit">Simpan Rack</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div id="modalIsiSlot" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">Isi Spesimen ke Slot</h4>
            </div>
            <form method="POST" action="{{ route('biorepository.storeSpecimen') }}">
                @csrf
                <div class="modal-body">
                    <input type="hidden" id="rack_id" name="rack_id">
                    <input type="hidden" id="existing_specimen_id" name="existing_specimen_id">

                    <div class="form-group m-b-25">
                        <div class="col-12">
                            <label>Category Penyimpanan</label>
                            <select class="form-control" id="kategorisimpan" name="kategorisimpan">
                                <option value="A">Penyimpanan Suhu Ruang</option>
                                <option value="B">Penyimpanan Suhu 4 Derajat</option>
                                <option value="C">Penyimpanan Suhu 20 Derajat</option>
                                <option value="D">Penyimpanan Suhu 80 Derajat</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col-lg-4">
                            <label>Shelf Nomor</label>
                            <input type="number" class="form-control" id="shelfnomor" name="shelfnomor" readonly>
                        </div>
                        <div class="col-lg-4">
                            <label>Rack Number</label>
                            <input type="number" class="form-control" id="raknomor" name="raknomor" readonly>
                        </div>
                        <div class="col-lg-4">
                            <label>Slot Number</label>
                            <input type="number" class="form-control" id="slotnomor" name="slotnomor" readonly>
                        </div>
                        <div class="col-lg-4">
                            <label>Box Number</label>
                            <input type="number" class="form-control" id="boxnomor" name="boxnomor" readonly>
                        </div>
                        <div class="col-lg-4">
                            <label>Tube Number</label>
                            <input type="number" class="form-control" id="tubenomor" name="tubenomor" readonly required>
                        </div>
                        <div class="col-lg-4">
                            <label>Tanggal Simpan</label>
                            <input type="date" class="form-control" id="stored_at" name="stored_at" value="{{ date('Y-m-d') }}" required>
                        </div>
                    </div>
                    <div class="form-group m-b-25">
                        <div class="col-12">
                            <label>Bactery Name</label>
                            <input type="text" class="form-control" id="nmbakteri" name="nmbakteri" required>
                        </div>
                    </div>
                    <div class="form-group m-b-25">
                        <div class="col-12">
                            <label>Strain</label>
                            <select class="form-control" id="strain" name="strain">
                                <option value="Gram Negatif">Gram Negatif</option>
                                <option value="Gram Positif">Gram Positif</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group m-b-25">
                        <div class="col-12">
                            <label>ATCC</label>
                            <input type="text" class="form-control" id="atcc" name="atcc" value="{{Session('nama')}}">
                        </div>
                    </div>
                    <div class="form-group m-b-25">
                        <div class="col-12">
                            <label>Sample ID</label>
                            <input type="text" class="form-control" id="sampleid" name="sampleid" placeholder="Contoh: 26-000001 (isi jika sudah memiliki sample ID dari MyLIS)" >
                        </div>
                    </div>
                    <div class="form-group m-b-25" id="group-volume-awal">
                        <div class="col-12">
                            <label>Volume Awal (ml)</label>
                            <input type="number" step="0.01" min="0" class="form-control" id="volume" name="volume">
                        </div>
                    </div>

                    <div class="form-group m-b-25" id="group-volume-ambil" style="display:none;">
                        <div class="col-12">
                            <label>Volume Diambil (ml)</label>
                            <input type="number" step="0.01" min="0" class="form-control" id="volume_ambil" name="volume_ambil">
                            <small class="text-muted">Sisa volume saat ini: <span id="volume_sekarang_text">0</span> ml</small>
                        </div>
                    </div>

                    <div class="form-group m-b-0">
                        <div class="col-12">
                            <label>Sample Code (Preview Otomatis)</label>
                            <input type="text" class="form-control" id="samplecodepreview" readonly>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Simpan Spesimen</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('script')
<script>
    function buildSampleCodePreview() {
        var category = $('#kategorisimpan').val() || '';
        var shelf = $('#shelfnomor').val() || '';
        var rack = $('#raknomor').val() || '';
        var slot = $('#slotnomor').val() || '';
        var box = $('#boxnomor').val() || '';
        var tube = $('#tubenomor').val() || '';
        var code = [category, shelf, rack, slot, box, tube].join('-');
        $('#samplecodepreview').val(code);
    }

    $(document).on('click', '.js-slot', function () {
        $('#existing_specimen_id').val('');
        $('#rack_id').val($(this).data('rack-id'));
        $('#shelfnomor').val($(this).data('shelf'));
        $('#raknomor').val($(this).data('rackno'));
        $('#slotnomor').val($(this).data('slot'));
        $('#boxnomor').val($(this).data('box'));
        $('#tubenomor').val($(this).data('tube'));
        $('#nmbakteri').val('').prop('readonly', false);
        $('#strain').val('Gram Negatif').prop('disabled', false);
        $('#volume').val('');
        $('#volume_ambil').val('');
        $('#group-volume-awal').show();
        $('#group-volume-ambil').hide();
        $('#volume_sekarang_text').text('0');
        buildSampleCodePreview();
        $('#modalIsiSlot').modal('show');
    });

    $(document).on('click', '.js-slot-filled', function () {
        $('#existing_specimen_id').val($(this).data('specimen-id'));
        $('#rack_id').val($(this).data('rack-id'));
        $('#shelfnomor').val($(this).data('shelf'));
        $('#raknomor').val($(this).data('rackno'));
        $('#slotnomor').val($(this).data('slot'));
        $('#boxnomor').val($(this).data('box'));
        $('#tubenomor').val($(this).data('tube'));
        $('#nmbakteri').val($(this).data('bakteri')).prop('readonly', true);
        $('#strain').val($(this).data('strain')).prop('disabled', true);
        $('#volume').val('');
        $('#volume_ambil').val('');
        $('#group-volume-awal').hide();
        $('#group-volume-ambil').show();
        $('#volume_sekarang_text').text($(this).data('volume'));
        buildSampleCodePreview();
        $('#modalIsiSlot').modal('show');
    });

    $(document).on('keyup change', '#kategorisimpan, #shelfnomor, #raknomor, #slotnomor, #boxnomor, #tubenomor', function () {
        buildSampleCodePreview();
    });

    $(function () {
        $('#biorepoTable tfoot th').each(function () {
            var title = $(this).text();
            if (title !== '') {
                $(this).html('<input type="text" placeholder="Filter ' + title + '" />');
            } else {
                $(this).html('');
            }
        });

        var table = $('#biorepoTable').DataTable({
            order: [[11, 'desc']],
            pageLength: 25
        });

        table.columns().every(function () {
            var that = this;
            $('input', this.footer()).on('keyup change clear', function () {
                if (that.search() !== this.value) {
                    that.search(this.value).draw();
                }
            });
        });

        $('#btnOpenListTab').on('click', function () {
            $('#tabListLink').tab('show');
        });

        $(document).on('submit', '.js-delete-specimen', function (e) {
            if (!confirm('Yakin hapus spesimen ini?')) {
                e.preventDefault();
            }
        });
        $(document).on('submit', '.js-delete-rack', function (e) {
            if (!confirm('Yakin hapus rack ini? Semua spesimen pada rack ini juga akan dihapus.')) {
                e.preventDefault();
            }
        });
        $(document).on('submit', '.js-delete-cabinet', function (e) {
            if (!confirm('Yakin hapus lemari ini? Semua rack dan spesimennya akan dihapus.')) {
                e.preventDefault();
            }
        });
    });
</script>
@endpush