@extends('operations.layout.mainlayout')

@section('content')
<style>
.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    color: black;
}

.card-footer::after {
    content: none;
}

.btn-info {
    max-width: 190px;
    height: 38px;
    padding: 4px 16px 4px 16px;
    border-radius: 30px;
    border: 1px;
    gap: 8px;
    background: var(--blazma-primary);
    color: white;
    font-size: 16px;
    font-weight: 400;
}

.btn-info:hover {
    background: white;
    color: var(--blazma-primary);
    border: 1px solid var(--blazma-primary);
}

div.dataTables_wrapper div.dataTables_filter {
    display: inline;
    float: right;
}

div.dataTables_wrapper div.dataTables_filter input {
    margin-left: 0.5em;
    display: inline-block;
    width: 250px;
}

#insurance-price-lists-table_filter i {
    color: var(--blazma-primary);
    position: absolute;
    top: 15px;
    right: 25px;
}

table.dataTable tbody td input[type="checkbox"] {
    background: #f4f6f9;
    accent-color: var(--blazma-primary);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    vertical-align: middle;
    border: 1px solid #E6E6E6;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
}

table.dataTable tbody td input[type="checkbox"]:checked {
    appearance: auto;
    clip-path: circle(50% at 50% 50%);
}

#insurance-price-lists-table {
    font-size: 16px;
}

#insurance-price-lists-table thead th {
    background-color: var(--blazma-primary);
    color: white;
    font-weight: 500;
}

.action-btn {
    border-radius: 30px;
    padding: 4px 16px;
    border: 1px solid var(--blazma-primary);
    background: transparent;
    color: var(--blazma-primary) !important;
}

.action-btn:hover,
.action-btn:focus {
    background: var(--blazma-primary) !important;
    color: white !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current, 
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--blazma-primary);
    color: white !important;
    border: 1px solid var(--blazma-primary);
    border-radius: 50%;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #f8f9fa;
    color: var(--blazma-primary) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border: 1px solid transparent;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, 
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, 
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    color: #6c757d !important;
}

#modal-price-list-table {
    width: 100% !important;
}

.table.dataTable {
    width: 100% !important;
}

table.dataTable {
    width: 100% !important;
}

.dataTables_wrapper {
    width: 100% !important;
    min-width: 100%;
}

div.dataTables_wrapper div.dataTables_info {
    width: auto !important;
}

a[download] {
    display: none;
}
</style>
<link href="/css/operations.css?v={{ filemtime(public_path('css/operations.css')) }}" rel="stylesheet">

<div class="content-header p-0">
    <div class="container-fluid card m-0">
        <div class="row">
            <div class="col-sm-6 m-0 card">
                <h1 class="card-body m-0 text-dark" style="color: var(--blazma-text)!important;">Insurance Test Price Lists</h1>
            </div>
            <div class="col-sm-6">
            </div>
        </div>
    </div>
</div>

<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card bg-light mr-0">
                    <div class="card-body">
                        <table id="insurance-price-lists-table" class="table table-bordered table-striped">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>Insurance Name</th>
                                <th>Active Hospitals</th>
                                <th>Actions</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($insurances as $insurance)
                            <tr>
                                <td>{{ $insurance->ID }}</td>
                                <td>{{ $insurance->NAME }}</td>
                                <td>{{ $insurance->hospitals()->count() }}</td>
                                <td>
                                    <a href="#" class="btn btn-sm action-btn price-list-btn" data-id="{{ $insurance->ID }}">
                                        <i class="fas fa-list"></i> Manage Price List
                                    </a>
                                </td>
                            </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Price List Modal -->
<div class="modal fade" id="modal-price-list">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">Insurance Price List</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col" style="text-align: center;">
                        <div class="alert alert-danger alert-danger-price-list" role="alert" style="display: none;"></div>
                    </div>
                </div>
                
                <div class="row mb-3">
                    <div class="col-md-6">
                        <input type="hidden" id="insurance_id" value="">
                        <input type="hidden" id="hospital-select" value="0">
                        <h4 id="insurance-name" class="mt-2"></h4>
                    </div>
                    <div class="col-md-6 text-right">
                        <button id="bulk-upload-btn" class="btn btn-info" style="margin-top: 32px;">
                            <i class="fas fa-upload"></i> Import Price List
                        </button>
                        <button id="show-export-modal" class="btn btn-info" style="margin-top: 32px; margin-left: 10px;">
                            <i class="fas fa-file-export"></i> Download Price List
                        </button>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-12">
                        <table id="modal-price-list-table" class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th>Test Name</th>
                                    <th>Service Type</th>
                                    <th>Type</th>
                                    <th>Price (without tax)</th>
                                    <th>Cost Price</th>
                                    <th>Requires Approval</th>
                                    <th>Is Excluded</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- Bulk Upload Modal -->
<div class="modal fade" id="bulk-upload-modal" tabindex="-1" role="dialog" aria-labelledby="bulkUploadModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="bulkUploadModalLabel">Import Price List</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="alert alert-danger alert-danger-bulk-upload" role="alert" style="display: none;"></div>
                <div class="alert alert-info">
                    <p>Please download the template file, fill in the prices, and upload it back.</p>
                    <p>Format: CSV file with columns: TEST_ID, TEST_NAME, PRICE, COST_PRICE, REQUIRES_APPROVAL, IS_EXCLUDED, TYPE</p>
                    <p>Note: The TEST_NAME column is for reference only and will not be imported. REQUIRES_APPROVAL and IS_EXCLUDED should be 0 or 1; TYPE should be 1 for Normal or 2 for Home Visit</p>
                </div>
                <div class="mb-3">
                    <a href="#" id="download-template-btn" class="btn btn-info">
                        <i class="fas fa-download"></i> Download Template
                    </a>
                </div>
                <form id="bulk-upload-form" enctype="multipart/form-data">
                    <input type="hidden" id="upload-type" name="upload_type" value="TEST">
                    <div class="form-group">
                        <label for="bulk-file">Upload CSV File</label>
                        <div class="custom-file">
                            <input type="file" class="custom-file-input" id="bulk-file" name="bulk_file" accept=".csv" required>
                            <label class="custom-file-label" for="bulk-file">Choose file</label>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-info" id="upload-bulk-btn">Upload</button>
            </div>
        </div>
    </div>
</div>

<!-- Export price list -->
<div class="modal fade" id="export-price-list-modal" tabindex="-1" role="dialog" aria-labelledby="exportPriceListModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exportPriceListModalLabel">Download Price List</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="alert alert-info">
                    <p>Please select the hospital to download the price list.</p>
                </div>
                <div class="form-group">
                    <label for="export-hospital-select">Select Hospital:</label>
                    <select id="export-hospital-select" class="form-control">
                        <option value="">Select Hospital</option>
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-info" id="export-price-list-btn">Download</button>
            </div>
        </div>
    </div>
</div>

<!-- Add button to show export modal -->
<div class="card-footer">
    <button type="button" class="btn btn-info" id="show-export-modal"><i class="fas fa-file-export"></i> Download Price List</button>
</div>
@endsection

@section('footer-scripts')
<script>
$(document).ready(function() {
    $('#insurance-price-lists-table').DataTable({
        "pageLength": 25,
        "order": [[0, "desc"]],
        "responsive": true,
        "lengthChange": false,
        "autoWidth": false,
        "language": {
            "processing": "",
            "paginate": {
                "next": '&#8594;',
                "previous": '&#8592;'
            },
            "search": '',
            "searchPlaceholder": "Search anything here"
        }
    });
    
    let testsTable, packagesTable;
    
    $('.price-list-btn').on('click', function(e) {
        e.preventDefault();
        
        let insuranceId = $(this).data('id');
        let insuranceName = $(this).closest('tr').find('td:eq(1)').text();
        
        $('#insurance_id').val(insuranceId);
        $('#insurance-name').text('Provider: ' + insuranceName);
        
        $('.alert-danger-price-list').hide();
        
        $('#modal-price-list').modal('show');
        
        initializePriceListTable(insuranceId);
    });
    
    function initializePriceListTable(insuranceId) {
        if ($.fn.DataTable.isDataTable('#modal-price-list-table')) {
            $('#modal-price-list-table').DataTable().destroy();
        }
        
        $('#modal-price-list-table').DataTable({
            processing: true,
            serverSide: true,
            autoWidth: true,
            responsive: true,
            width: '100%',
            language: {
                processing: "",
                paginate: {
                    next: '&#8594;',
                    previous: '&#8592;'
                }
            },
            ajax: {
                url: `/operations/insurance/${insuranceId}/hospital/{{ session()->has('hospital_id') ? session('hospital_id') : 0 }}/pricelist`,
                error: function(xhr) {
                    let errorMsg = 'An error occurred while loading data';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMsg = xhr.responseJSON.message;
                    }
                    $('.alert-danger-price-list').text(errorMsg).show();
                }
            },
            columns: [
                { data: 'NAME_EN', name: 'NAME_EN' },
                { data: 'SERVICE_TYPE', name: 'SERVICE_TYPE' },
                { data: 'TYPE_TITLE', name: 'TYPE_TITLE' },
                { 
                    data: 'PRICE', 
                    name: 'PRICE',
                    render: function(data, type, row) {
                        return `<a href="#" class="editable-price" 
                                  data-pk="${row.ID}" 
                                  data-name="PRICE"
                                  data-type="number"
                                  data-step="0.01"
                                  data-insurance-id="${$('#insurance_id').val()}">${data || 0}</a>`;
                    }
                },
                { 
                    data: 'COST_PRICE', 
                    name: 'COST_PRICE',
                    render: function(data, type, row) {
                        return `<a href="#" class="editable-cost-price" 
                                  data-pk="${row.ID}" 
                                  data-name="COST_PRICE"
                                  data-type="number"
                                  data-step="0.01"
                                  data-insurance-id="${$('#insurance_id').val()}">${data || 0}</a>`;
                    }
                },
                { 
                    data: 'REQUIRES_APPROVAL', 
                    name: 'REQUIRES_APPROVAL',
                    render: function(data, type, row) {
                        let checked = data === 0 ? '' : 'checked';
                        return `<input type="checkbox" 
                                class="approval-checkbox" 
                                data-pk="${row.ID}" 
                                data-insurance-id="${$('#insurance_id').val()}" ${checked}>`;
                    }
                },
                { 
                    data: 'IS_EXCLUDED', 
                    name: 'IS_EXCLUDED',
                    render: function(data, type, row) {
                        let checked = data == 1 ? 'checked' : '';
                        return `<input type="checkbox" 
                                class="excluded-checkbox" 
                                data-pk="${row.ID}" 
                                data-insurance-id="${$('#insurance_id').val()}" ${checked}>`;
                    }
                }
            ],
            order: [[0, 'asc']],
            drawCallback: function() {
                $(window).trigger('resize');
                
                $('.editable-price').editable({
                    type: 'number',
                    step: 0.01,
                    url: '/operations/insurance/test-price/save',
                    title: 'Enter price',
                    params: function(params) {
                        params.INSURANCE_ID = $(this).data('insurance-id');
                        return params;
                    },
                    success: function(response, newValue) {
                        if (response && response.success) {
                            toastr.success('Price updated successfully');
                        } else {
                            return response.message || 'An error occurred';
                        }
                    }
                });
                
                $('.editable-cost-price').editable({
                    type: 'number',
                    step: 0.01,
                    url: '/operations/insurance/test-price/save',
                    title: 'Enter cost price',
                    params: function(params) {
                        params.INSURANCE_ID = $(this).data('insurance-id');
                        return params;
                    },
                    success: function(response, newValue) {
                        if (response && response.success) {
                            toastr.success('Cost price updated successfully');
                        } else {
                            return response.message || 'An error occurred';
                        }
                    }
                });
                
                $('.approval-checkbox').on('change', function() {
                    let testId = $(this).data('pk');
                    let insuranceId = $(this).data('insurance-id');
                    let requiresApproval = $(this).prop('checked') ? 1 : 0;
                    
                    $.ajax({
                        url: '/operations/insurance/test-price/save',
                        type: 'POST',
                        data: {
                            pk: testId,
                            name: 'REQUIRES_APPROVAL',
                            value: requiresApproval,
                            INSURANCE_ID: insuranceId
                        },
                        success: function(response) {
                            if (response && response.success) {
                                toastr.success('Approval status updated');
                            } else {
                                toastr.error(response.message || 'An error occurred');
                            }
                        },
                        error: function() {
                            toastr.error('An error occurred');
                        }
                    });
                });
                
                $('.excluded-checkbox').on('change', function() {
                    let testId = $(this).data('pk');
                    let insuranceId = $(this).data('insurance-id');
                    let isExcluded = $(this).prop('checked') ? 1 : 0;
                    
                    $.ajax({
                        url: '/operations/insurance/test-price/save',
                        type: 'POST',
                        data: {
                            pk: testId,
                            name: 'IS_EXCLUDED',
                            value: isExcluded,
                            INSURANCE_ID: insuranceId
                        },
                        success: function(response) {
                            if (response && response.success) {
                                toastr.success('Exclusion status updated');
                            } else {
                                toastr.error(response.message || 'An error occurred');
                            }
                        },
                        error: function() {
                            toastr.error('An error occurred');
                        }
                    });
                });
            }
        });
    }
    
    $('#bulk-upload-btn').on('click', function() {
        $('#bulk-upload-modal').modal('show');
    });

    $('#download-template-btn').click(function(e){
        e.preventDefault();
        
        $(".alert-danger-bulk-upload").slideUp("slow", function() {});
        $(this).html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Loading...').attr('disabled', true);
        
        var insuranceId = $("#insurance_id").val();
        
        if (!insuranceId) {
            toastr.error('Please select an insurance first');
            $(this).html('<i class="fas fa-download"></i> Download Template').attr('disabled', false);
            return;
        }
        
        $.ajax({
            type: "GET",
            url: '/operations/insurance/' + insuranceId + '/hospital/{{ session()->has('hospital_id') ? session('hospital_id') : 0 }}/pricelist/export',
            contentType: "application/json; charset=utf-8",
        }).done(function(data) {
            var a = document.createElement("a");
            a.href = data.file;
            a.download = data.name;
            document.body.appendChild(a);
            a.click();
            a.remove();
            
            $('#download-template-btn').html('<i class="fas fa-download"></i> Download Template').attr('disabled', false);
        }).fail(function(jqXHR, textStatus, errorThrown) {
            $(".alert-danger-bulk-upload").html(jqXHR.responseJSON?.errorMessage || 'Error downloading template');
            $(".alert-danger-bulk-upload").slideDown("slow", function() {});
            $('#download-template-btn').html('<i class="fas fa-download"></i> Download Template').attr('disabled', false);
        });
    });

    $('#upload-bulk-btn').on('click', function() {
        let insuranceId = $('#insurance_id').val();
        let file = $('#bulk-file')[0].files[0];
        
        if (!file) {
            toastr.error('Please select a file to upload');
            return;
        }
        
        let formData = new FormData();
        formData.append('file', file);
        formData.append('insurance_id', insuranceId);
        
        $(this).prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Uploading...');
        
        $.ajax({
            url: '/operations/insurance/test-price/bulk-upload',
            type: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            success: function(response) {
                $('#upload-bulk-btn').prop('disabled', false).html('Upload');
                
                if (response.success) {
                    initializePriceListTable(insuranceId);
                    
                    $('#bulk-upload-modal').modal('hide');
                    
                    toastr.success(response.message || 'Prices uploaded successfully');
                } else {
                    toastr.error(response.errorMessage || 'An error occurred during upload');
                }
            },
            error: function(xhr) {
                $('#upload-bulk-btn').prop('disabled', false).html('Upload');
                
                let errorMsg = 'An error occurred during upload';
                if (xhr.responseJSON && xhr.responseJSON.errorMessage) {
                    errorMsg = xhr.responseJSON.errorMessage;
                }
                
                toastr.error(errorMsg);
            }
        });
    });

    $('#bulk-file').on('change', function() {
        let fileName = $(this).val().split('\\').pop();
        $(this).next('.custom-file-label').html(fileName || 'Choose file');
    });

    $('#export-price-list-btn').on('click', function() {
        let insuranceId = $('#insurance_id').val();
        let hospitalId = $('#export-hospital-select').val();
        
        if (!hospitalId) {
            toastr.error('Please select a hospital');
            return;
        }
        
        window.open(`/operations/insurance/${insuranceId}/hospital/${hospitalId}/pricelist/export`, '_blank');
        
        $('#export-price-list-modal').modal('hide');
    });

    $('#show-export-modal').click(function(){
        $(".alert-danger-price-list").slideUp("slow", function() {});
        $(this).html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Loading...').attr('disabled', true);
        
        var insuranceId = $("#insurance_id").val();
        
        if (!insuranceId) {
            toastr.error('Please select an insurance first');
            $(this).html('<i class="fas fa-file-export"></i> Download Price List').attr('disabled', false);
            return;
        }
        
        $.ajax({
            type: "GET",
            url: '/operations/insurance/' + insuranceId + '/hospital/{{ session()->has('hospital_id') ? session('hospital_id') : 0 }}/pricelist/export',
            contentType: "application/json; charset=utf-8",
        }).done(function(data) {
            var a = document.createElement("a");
            a.href = data.file;
            a.download = data.name;
            document.body.appendChild(a);
            a.click();
            a.remove();
            
            $('#show-export-modal').html('<i class="fas fa-file-export"></i> Download Price List').attr('disabled', false);
        }).fail(function(jqXHR, textStatus, errorThrown) {
            $(".alert-danger-price-list").html(jqXHR.responseJSON?.errorMessage || 'Error downloading file');
            $(".alert-danger-price-list").slideDown("slow", function() {});
            $('#show-export-modal').html('<i class="fas fa-file-export"></i> Download Price List').attr('disabled', false);
        });
    });
});
</script>
@endsection