<div id="AddServiceFeeModal" class="modal fade" tabindex="-1" aria-labelledby="AddServiceFeeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document" style="display: block;">
     <form method="post" action="<?= base_url('admin/sub_services/add') ?>">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <h5 class="modal-title text-white">ADD SERVICE / FEE</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <!-- CSRF Token -->
                <input type="hidden" name="<?= $this->security->get_csrf_token_name(); ?>" 
                       value="<?= $this->security->get_csrf_hash(); ?>" />

                <div class="modal-body">
                    <!-- Select Service -->
                    <div class="mb-3">
                        <label>Service</label>
                        <select name="service_id" class="form-control" required>
                            <?php foreach($services as $s): ?>
                                <option value="<?= $s->id ?>"><?= $s->name ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>

                    <!-- Sub-Service Name -->
                    <div class="mb-3">
                        <label>Name</label>
                        <input type="text" name="name" class="form-control" required>
                    </div>

                    <!-- Sub-Service Description -->
                    <div class="mb-3">
                        <label>Description</label>
                        <textarea name="description" class="form-control"></textarea>
                    </div>

                    <!-- Fee -->
                    <div class="mb-3">
                        <label>Fee</label>
                        <input type="number" step="0.01" name="fee" class="form-control" required>
                    </div>

                    <!-- Currency (optional) -->
                    <div class="mb-3">
                        <label>Currency</label>
                        <input type="text" name="currency" class="form-control" value="PKR">
                    </div>
                </div>

                <div class="modal-footer">
                    <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button class="btn btn-primary">Add Sub Service</button>
                </div>
            </div>
        </form>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function(){
    var csrfName = '<?= $this->security->get_csrf_token_name(); ?>';
    var csrfHash = '<?= $this->security->get_csrf_hash(); ?>';
    var temp_file = '';

    // 1) Load Services when Department changes
    $('#importDepartment').on('change', function(){
        var dep_id = $(this).val();
        var $service = $('#importService');
        var $noServiceMsg = $('#noServiceMsg');

        $service.empty().append('<option value="">Select Service</option>');
        $noServiceMsg.addClass('d-none');

        if(dep_id){
            $.getJSON('<?= base_url("admin/sub_services/by_department/") ?>' + dep_id, function(data){
                if(data.length === 0){
                    $service.append('<option value="">No services found</option>');
                    $noServiceMsg.removeClass('d-none');
                } else {
                    $.each(data, function(i,item){
                        $service.append('<option value="'+item.id+'">'+item.name+'</option>');
                    });
                }
            });
        }
    });

    // 2) Start Import
    $('#startImportBtn').on('click', function(){
        var service_id = $('#importService').val();
        var file = $('#csv_file')[0].files[0];

        if(!$('#importDepartment').val() || !service_id || !file){
            alert('Select department, service and CSV file first!');
            return;
        }

        var formData = new FormData();
        formData.append('csv_file', file);
        formData.append('service_id', service_id);
        formData.append(csrfName, csrfHash);

        // Upload CSV first
        $.ajax({
            url: '<?= site_url("admin/sub_services/upload_csv_temp") ?>',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            dataType: 'json',
            success: function(res){
                if(res.status === 'ok'){
                    csrfHash = res.csrf_hash; // update hash
                    temp_file = res.file;

                    // Process import
                    $.post('<?= site_url("admin/sub_services/process_import") ?>',
                        {temp_file: temp_file, service_id: service_id, [csrfName]: csrfHash},
                        function(resp){
                            alert(resp.message || 'Import completed!');
                            location.reload();
                        }, 'json'
                    );
                } else {
                    alert(res.message || 'Upload failed');
                }
            },
            error: function(xhr){
                alert('Upload error: ' + xhr.statusText);
            }
        });
    });
});
</script>