<!-- Modal Pilih Model -->
<div class="modal fade" id="modalSelectModel" tabindex="-1" role="dialog" aria-labelledby="modalSelectModelLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalSelectModelLabel">Pilih Model Gamis</h5>
                <button type="button" class="close" onclick="closeModalOnly('modalSelectModel')" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row" id="modelGrid">
                    <!-- Models will be loaded here dynamically -->
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // Load model grid
    function loadModelGrid() {
        $.ajax({
            url: '<?= base_url('api/models') ?>',
            type: 'GET',
            dataType: 'json',
            success: function(data) {
                let html = '';
                if (data.length > 0) {
                    data.forEach(function(model) {
                        const hargaModel = parseFloat(model.ongkos_pengerjaan) || 0;
                        const hargaFormatted = new Intl.NumberFormat('id-ID').format(hargaModel);
                        html += `
                        <div class="col-md-4 col-sm-6 mb-3">
                            <div class="card model-card cursor-pointer" onclick="selectModel(this, '${model.kode_model}', '${model.nama_model}')">
                                <img src="${model.foto_model}" class="card-img-top" alt="${model.nama_model}" style="height: 200px; object-fit: cover;">
                                <div class="card-body p-2">
                                    <h6 class="card-title text-center mb-0">${model.nama_model}</h6>
                                    <small class="text-muted text-center d-block">Kode: ${model.kode_model}</small>
                                    <small class="text-success text-center d-block font-weight-bold">Rp ${hargaFormatted}</small>
                                </div>
                            </div>
                        </div>
                    `;
                    });
                } else {
                    html = '<div class="col-12"><p class="text-center text-muted">Tidak ada model tersedia</p></div>';
                }
                $('#modelGrid').html(html);
            },
            error: function() {
                $('#modelGrid').html('<div class="col-12"><p class="text-center text-danger">Gagal memuat data model</p></div>');
            }
        });
    }

    function selectModel(element, kodeModel, namaModel) {
        // Remove previous selection
        $('.model-card').removeClass('border-success border-3');

        // Add border to selected card (element is the .model-card already)
        $(element).addClass('border-success border-3');

        // Fetch full model data
        $.ajax({
            url: '<?= base_url('api/model/') ?>' + kodeModel,
            type: 'GET',
            dataType: 'json',
            success: function(data) {
                // Check if using multi-item form (window.selectModelFromGrid exists)
                if (typeof window.selectModelFromGrid === 'function') {
                    window.selectModelFromGrid(data.kode_model, data.nama_model, data.foto_model, data.ongkos_pengerjaan);
                } else {
                    // Old single-item form fallback
                    $('input[name="kode_model_selected"]').val(kodeModel);
                    $('input[name="nama_model_selected"]').val(namaModel);
                    updateModelPreview(kodeModel);
                    setTimeout(() => {
                        $('#modalSelectModel').modal('hide');
                    }, 300);
                }
            }
        });
    }

    function updateModelPreview(kodeModel) {
        $.ajax({
            url: '<?= base_url('api/model/') ?>' + kodeModel,
            type: 'GET',
            dataType: 'json',
            success: function(data) {
                $('#modelPreviewImg').attr('src', data.foto_model);
                $('#modelPreviewName').text(data.nama_model);
                $('#modelPreviewCode').text(data.kode_model);
                $('#modelPreview').show();
            }
        });
    }

    // Initialize on page load
    $(document).ready(function() {
        $('#modalSelectModel').on('show.bs.modal', function() {
            loadModelGrid();
        });
    });
</script>