@extends('operations.layout.mainlayout')

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

.btn-blz {
    color: #ba395e;
    border-color: #ba395e;
    width: 20%;
    margin: 2px;
}

.btn-blz:hover {
    color: #fff;
    background-color: #ba395e;
    border-color: #ba395e;
}

.date-filter {
    color: #e83e8c;
    border: 1px solid #e83e8c;
}

.badge-orange {
    background: #fd9843;
    color: #ffffff !important;
}

.badge-purple {
    background: #6f42c1;
}

.badge-phosphor {
    background: #ccff00;
    color: #000 !important;
}

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

#generate-claims-btn, #filter-claims-btn {
    max-width: 190px;
    height: 38px;
    padding: 4px 16px 4px 16px;
    border-radius: 30px;
    border: 1px;
    gap: 8px;
    background: #ba395e;
    color: white;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    letter-spacing: 0em;
}

#generate-claims-btn:hover, #filter-claims-btn:hover {
    background: white;
    color: #ba395e;
    border: 1px solid #ba395e;
}

.card-footer-btns {
    height: 38px;
    padding: 4px 16px 4px 4px;
    border-radius: 30px;
    border: 1px;
    gap: 8px;
    border: 1px solid #ba395e;
    background: transparent;
    color: black !important;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    letter-spacing: 0em;

    display: inline-flex;
    justify-content: space-around;
    align-items: center;
}

.card-footer-btns:hover,
.card-footer-btns:active,
.card-footer-btns:focus {
    background: #ba395e;
    color: white !important;
    border: 1px solid #ba395e;
}

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;
}

#claims-table_filter i {
    color: #ba395e;
    position: absolute;
    top: 15px;
    right: 25px;
}

table.dataTable tbody td input[type="checkbox"] {
    background: #f4f6f9;
    accent-color: #ba395e;
    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%);
}

#claims-table {
    font-size: 16px;
}

#claims-table thead th {
    background-color: #ba395e;
    color: white;
    font-weight: 500;
}

.action-btn {
    border-radius: 30px;
    padding: 4px 16px;
    border: 1px solid #ba395e;
    background: transparent;
    color: #ba395e;
}

.action-btn:hover,
.action-btn:focus {
    background: #ba395e;
    color: white;
}

.action-btn-danger {
    border-radius: 30px;
    padding: 4px 16px;
    border: 1px solid #dc3545;
    background: transparent;
    color: #dc3545;
}

.action-btn-danger:hover,
.action-btn-danger:focus {
    background: #dc3545;
    color: white;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current, 
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #ba395e;
    color: white !important;
    border: 1px solid #ba395e;
    border-radius: 50%;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #f8f9fa;
    color: #ba395e !important;
    border: 1px solid #ba395e;
}

.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;
}

.btn-primary {
    background-color: #ba395e;
    border-color: #ba395e;
}

.btn-primary:hover {
    background-color: white;
    color: #ba395e;
    border-color: #ba395e;
}

.btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
}

.modal-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.modal-title {
    color: #ba395e;
}

.btn-sm {
    border-radius: 20px;
}

.badge-warning {
    background-color: #ffc107;
    color: #212529;
}

.badge-info {
    background-color: #17a2b8;
    color: white;
}

.badge-success {
    background-color: #28a745;
    color: white;
}

.badge-danger {
    background-color: #dc3545;
    color: white;
}

.badge-primary {
    background-color: #ba395e;
    color: white;
}

.badge-secondary {
    background-color: #6c757d;
    color: white;
}

.card {
    border: none;
    border-radius: var(--card-radius);
    box-shadow: var(--shadow);
    background: #ffffff;
    overflow: hidden;
    margin-bottom: 24px;
    transition: var(--transition);
}

.card:hover {
    transform: none;
    box-shadow: var(--shadow);
}

.card-header {
    background: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding: 20px 24px;
}

.card-body {
    padding: 24px;
    background-color: #ffffff;
}
</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 bg-light m-0 text-dark" style="color: #ba395e!important;">Insurance Claims</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-header">
                        <h3 class="card-title">Generate Claims</h3>
                    </div>
                    <div class="card-body">
                        <form id="generate-claims-form">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="insurance-select">Insurance Provider</label>
                                        <select id="insurance-select" class="form-control" required>
                                            <option value="">Select Insurance</option>
                                            @foreach($insurances as $insurance)
                                                <option value="{{ $insurance->ID }}">{{ $insurance->NAME }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="start-date">Start Date</label>
                                        <input type="date" id="start-date" class="form-control" required>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="end-date">End Date</label>
                                        <input type="date" id="end-date" class="form-control" required>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label>&nbsp;</label>
                                        <button type="button" id="generate-claims-btn" class="btn btn-block">
                                            <i class="fas fa-file-invoice"></i> Generate
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row">
            <div class="col-12">
                <div class="card bg-light mr-0">
                    <div class="card-header">
                        <h3 class="card-title">Claims List</h3>
                    </div>
                    <div class="card-body">
                        <div class="row mb-3">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="filter-insurance">Insurance</label>
                                    <select id="filter-insurance" class="form-control">
                                        <option value="">All Insurance</option>
                                        @foreach($insurances as $insurance)
                                            <option value="{{ $insurance->ID }}">{{ $insurance->NAME }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="filter-status">Status</label>
                                    <select id="filter-status" class="form-control">
                                        <option value="">All Status</option>
                                        <option value="PENDING">Pending</option>
                                        <option value="SUBMITTED">Submitted</option>
                                        <option value="APPROVED">Approved</option>
                                        <option value="REJECTED">Rejected</option>
                                        <option value="PAID">Paid</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label for="filter-start-date">Start Date</label>
                                    <input type="date" id="filter-start-date" class="form-control">
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label for="filter-end-date">End Date</label>
                                    <input type="date" id="filter-end-date" class="form-control">
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label>&nbsp;</label>
                                    <button type="button" id="filter-claims-btn" class="btn btn-block">
                                        <i class="fas fa-search"></i> Filter
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <table id="claims-table" class="table table-bordered table-striped">
                            <thead>
                            <tr>
                                <th>Claim Number</th>
                                <th>Order Number</th>
                                <th>Insurance</th>
                                <th>Claim Amount</th>
                                <th>Patient Amount</th>
                                <th>Status</th>
                                <th>Created Date</th>
                                <th>Actions</th>
                            </tr>
                            </thead>
                            <tbody id="claims-table-body">

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<div class="modal fade" id="status-modal" tabindex="-1" role="dialog" aria-labelledby="statusModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="statusModalLabel">Update Claim Status</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="status-form">
                    <input type="hidden" id="claim-id">
                    <div class="form-group">
                        <label for="claim-status">Status</label>
                        <select class="form-control" id="claim-status">
                            <option value="PENDING">Pending</option>
                            <option value="SUBMITTED">Submitted</option>
                            <option value="APPROVED">Approved</option>
                            <option value="REJECTED">Rejected</option>
                            <option value="PAID">Paid</option>
                        </select>
                    </div>
                    <div class="form-group" id="payment-date-group" style="display: none;">
                        <label for="payment-date">Payment Date</label>
                        <input type="date" class="form-control" id="payment-date" value="{{ date('Y-m-d') }}">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn card-footer-btns" id="save-status-btn">Save</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="claim-details-modal" tabindex="-1" role="dialog" aria-labelledby="claimDetailsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="claimDetailsModalLabel">Claim Details</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="claim-details-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn card-footer-btns" id="print-claim-btn">Print</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('footer-scripts')
<script>
$(document).ready(function() {

    const claimsTable = $('#claims-table').DataTable({
        "pageLength": 25,
        "responsive": true,
        "lengthChange": false,
        "autoWidth": false,
        "order": [[6, "desc"]],
        "language": {
            "processing": "",
            "paginate": {
                "next": '&#8594;',
                "previous": '&#8592;'
            },
            "search": '',
            "searchPlaceholder": "Search anything here"
        }
    });

    $('#generate-claims-btn').click(function() {
        const insuranceId = $('#insurance-select').val();
        const startDate = $('#start-date').val();
        const endDate = $('#end-date').val();
        
        if (!insuranceId) {
            toastr.error('Please select an insurance provider');
            return;
        }
        
        if (!startDate || !endDate) {
            toastr.error('Please select date range');
            return;
        }
        
        if (new Date(startDate) > new Date(endDate)) {
            toastr.error('Start date cannot be after end date');
            return;
        }
        
        $.ajax({
            url: '/operations/insurance/generate-claims',
            type: 'POST',
            data: {
                insurance_id: insuranceId,
                start_date: startDate,
                end_date: endDate
            },
            success: function(response) {
                if (response.success) {
                    toastr.success(response.message);
                    loadClaimsData();
                } else {
                    toastr.error(response.message);
                }
            },
            error: function() {
                toastr.error('An error occurred while generating claims');
            }
        });
    });

    $('#filter-claims-btn').click(function() {
        loadClaimsData();
    });

    function loadClaimsData() {
        const insuranceId = $('#filter-insurance').val();
        const status = $('#filter-status').val();
        const startDate = $('#filter-start-date').val();
        const endDate = $('#filter-end-date').val();
        
        $.ajax({
            url: '/operations/insurance/get-claims-data',
            type: 'GET',
            data: {
                insurance_id: insuranceId,
                status: status,
                start_date: startDate,
                end_date: endDate
            },
            success: function(response) {
                if (response.success) {
                    claimsTable.clear();

                    response.claims.forEach(function(claim) {
                        const rowNode = claimsTable.row.add([
                            claim.CLAIM_NUMBER,
                            claim.endUserLabOrder ? claim.END_USER_LAB_ORDER_ID : 'N/A',
                            claim.insurance ? claim.insurance.NAME : 'N/A',
                            claim.CLAIM_AMOUNT + ' SAR',
                            claim.PATIENT_AMOUNT + ' SAR',
                            getStatusBadge(claim.STATUS),
                            formatDate(claim.created_at),
                            '<button class="btn btn-sm action-btn view-claim-btn" data-id="' + claim.ID + '">' +
                            '<i class="fas fa-eye"></i> View' +
                            '</button> ' +
                            '<button class="btn btn-sm action-btn update-status-btn" data-id="' + claim.ID + '" data-status="' + claim.STATUS + '">' +
                            '<i class="fas fa-sync-alt"></i> Update' +
                            '</button>'
                        ]).draw(false).node();

                        $(rowNode).attr('data-id', claim.ID);
                    });
                } else {
                    toastr.error(response.message);
                }
            },
            error: function() {
                toastr.error('An error occurred while loading claims');
            }
        });
    }

    function formatDate(dateString) {
        const date = new Date(dateString);
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
    }

    function getStatusBadge(status) {
        let badgeClass = '';
        
        switch(status) {
            case 'PENDING':
                badgeClass = 'badge-warning';
                break;
            case 'SUBMITTED':
                badgeClass = 'badge-info';
                break;
            case 'APPROVED':
                badgeClass = 'badge-success';
                break;
            case 'REJECTED':
                badgeClass = 'badge-danger';
                break;
            case 'PAID':
                badgeClass = 'badge-primary';
                break;
            default:
                badgeClass = 'badge-secondary';
        }
        
        return '<span class="badge ' + badgeClass + '">' + status + '</span>';
    }

    $(document).on('click', '.update-status-btn', function() {
        const claimId = $(this).data('id');
        const currentStatus = $(this).data('status');
        
        $('#claim-id').val(claimId);
        $('#claim-status').val(currentStatus);

        if (currentStatus === 'PAID') {
            $('#payment-date-group').show();
        } else {
            $('#payment-date-group').hide();
        }
        
        $('#status-modal').modal('show');
    });

    $('#claim-status').change(function() {
        if ($(this).val() === 'PAID') {
            $('#payment-date-group').show();
        } else {
            $('#payment-date-group').hide();
        }
    });

    $('#save-status-btn').click(function() {
        const claimId = $('#claim-id').val();
        const status = $('#claim-status').val();
        const paymentDate = $('#payment-date').val();
        
        $.ajax({
            url: '/operations/insurance/update-claim-status',
            type: 'POST',
            data: {
                ID: claimId,
                STATUS: status,
                PAYMENT_DATE: paymentDate
            },
            success: function(response) {
                if (response.success) {
                    toastr.success(response.message);
                    $('#status-modal').modal('hide');
                    loadClaimsData();
                } else {
                    toastr.error(response.message);
                }
            },
            error: function() {
                toastr.error('An error occurred while updating status');
            }
        });
    });

    $(document).on('click', '.view-claim-btn', function() {
        const claimId = $(this).data('id');
        
        $.ajax({
            url: '/operations/insurance/get-claim-details',
            type: 'GET',
            data: {
                claim_id: claimId
            },
            success: function(response) {
                if (response.success) {
                    const claim = response.claim;
                    const order = claim.endUserLabOrder;
                    const insurance = claim.insurance;
                    
                    let html = '<div class="row">' +
                        '<div class="col-md-6">' +
                        '<h5>Claim Information</h5>' +
                        '<table class="table table-bordered">' +
                        '<tr><th>Claim Number</th><td>' + claim.CLAIM_NUMBER + '</td></tr>' +
                        '<tr><th>Status</th><td>' + getStatusBadge(claim.STATUS) + '</td></tr>' +
                        '<tr><th>Claim Amount</th><td>' + claim.CLAIM_AMOUNT + ' SAR</td></tr>' +
                        '<tr><th>Patient Amount</th><td>' + claim.PATIENT_AMOUNT + ' SAR</td></tr>' +
                        '<tr><th>Created Date</th><td>' + formatDate(claim.created_at) + '</td></tr>' +
                        (claim.PAYMENT_DATE ? '<tr><th>Payment Date</th><td>' + formatDate(claim.PAYMENT_DATE) + '</td></tr>' : '') +
                        '</table>' +
                        '</div>' +
                        '<div class="col-md-6">' +
                        '<h5>Insurance Information</h5>' +
                        '<table class="table table-bordered">' +
                        '<tr><th>Insurance Name</th><td>' + insurance.NAME + '</td></tr>' +
                        '<tr><th>Policy Number</th><td>' + (order.POLICY_NUMBER || 'N/A') + '</td></tr>' +
                        '</table>' +
                        '</div>' +
                        '</div>';
                        
                    html += '<div class="row mt-3">' +
                        '<div class="col-12">' +
                        '<h5>Order Information</h5>' +
                        '<table class="table table-bordered">' +
                        '<tr><th>Order Number</th><td>' + (order.ID || 'N/A') + '</td></tr>' +
                        '<tr><th>Patient Name</th><td>' + (order.eNDUSER ? order.eNDUSER.FULL_NAME : 'N/A') + '</td></tr>' +
                        '<tr><th>Patient ID</th><td>' + (order.END_USER_ID || 'N/A') + '</td></tr>' +
                        '<tr><th>Order Date</th><td>' + formatDate(order.CREATE_DATE || order.created_at) + '</td></tr>' +
                        '</table>' +
                        '</div>' +
                        '</div>';
                        
                    html += '<div class="row mt-3">' +
                        '<div class="col-12">' +
                        '<h5>Ordered Tests</h5>' +
                        '<table class="table table-bordered">' +
                        '<thead><tr><th>Test Name</th><th>Test Code</th><th>Price</th><th>Coverage</th><th>Patient Portion</th></tr></thead>' +
                        '<tbody>';
                        
                    response.tests.forEach(function(test) {
                        html += '<tr>' +
                            '<td>' + test.name + '</td>' +
                            '<td>' + test.code + '</td>' +
                            '<td>' + test.price + ' SAR</td>' +
                            '<td>' + (test.is_covered ? 'Yes' : 'No') + '</td>' +
                            '<td>' + test.patient_portion + ' SAR</td>' +
                            '</tr>';
                    });
                        
                    html += '</tbody></table>' +
                        '</div>' +
                        '</div>';
                    
                    $('#claim-details-body').html(html);
                    $('#claim-details-modal').modal('show');
                } else {
                    toastr.error(response.message);
                }
            },
            error: function() {
                toastr.error('An error occurred while loading claim details');
            }
        });
    });

    $('#print-claim-btn').click(function() {
        const printContents = document.getElementById('claim-details-body').innerHTML;
        const originalContents = document.body.innerHTML;
        
        document.body.innerHTML = '<div class="container mt-4">' + printContents + '</div>';
        window.print();
        document.body.innerHTML = originalContents;

        $(document).ready();
    });

    loadClaimsData();
});
</script>
@endsection