@extends("components.layout.master")
@section('title', ' Insurance')
@section('module-icon','mdi mdi-account-outline')
@section('content')
<style>
 .modal-body img {
    width: 100%; /* Make image width 100% of its container */
    height: 200px; /* Set a fixed height for all images */
    object-fit: cover; /* Ensures the image covers the area without distorting */
    border: 2px solid #ddd; /* Adds a border around each image */
    border-radius: 8px; /* Optional: Adds rounded corners to the border */
    padding: 5px; /* Space between image and border */
    margin-bottom: 15px; /* Adds space below each image */
}


    </style>
<!-- Content Wrapper. Contains page content -->
<div class="page-content">
    <div class="container-fluid"> 
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        
                        <table id="InsuranceTable" class="table table-bordered dt-responsive" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                            <thead>
                                <tr>
                                    <th>No.</th>
                                    <th>Name</th>
                                    <th>Date</th>
                                    <th>Products</th>
                                    <th>From</th>
                                    <th>To</th>
                                    <th>Amount</th>
                                    <th>Payable Amount</th>
                                    <th>Status</th>
                                    <th>More Details</th>
                                    <th>Load Vehicle Images</th>
                                    <th>Bill Copy Images</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if ($insurance->isEmpty())
                                <tr>
                                    <td colspan="12">No records found.</td>
                                </tr>
                            @else
                                @foreach ($insurance as $insurances)
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td>{{ $insurances->user->name ?? '' }}</td>
                                        <td>{{ \Carbon\Carbon::parse($insurances->generated_at)->format('d/m/Y') ?? '' }}</td>
                                        <td>
                                            @if($insurances->id)
                                                <button type="button" class="btn btn-primary view-products" data-toggle="modal" data-target="#productModal" data-insurance-id="{{ $insurances->id }}">View</button>
                                            @else
                                                <span>No products</span>
                                            @endif
                                        </td>
                                        <td>{{ $insurances->fromCity->city_name ?? '' }}-{{ $insurances->fromState->state_name ?? '' }}</td>
                                        <td>{{ $insurances->toCity->city_name ?? '' }}-{{ $insurances->toState->state_name ?? '' }}</td>
                                        <td>{{ $insurances->total ?? '' }}</td>
                                        <td>
                                            <a href="javascript:void(0);" class="amount-link" data-insurance-id="{{ $insurances->id }}" data-amount="{{ $insurances->total ?? 0 }}" data-final-amount="{{ $insurances->payable_amount ?? 0 }}" data-premium-percentage="{{ $insurances->premium_percentage ?? 0 }}" data-gst-percentage="{{ $insurances->gst_percentage ?? 0 }}">
                                                <u>{{ $insurances->payable_amount ?? '' }}</u>
                                            </a>
                                        </td>
                                        
                                        
                                        <td>{{ $insurances->status ?? '' }}</td>
                                        <td>
                                            <button type="button" class="btn btn-primary view-details" data-toggle="modal" data-target="#detailsModal" data-insurance-id="{{ $insurances->id }}">View</button>
                                        </td>
                                        <td>
                                            @if($insurances->load_vehicle_images)
                                                <button type="button" class="btn btn-primary view-images" data-toggle="modal" data-target="#imageModal" data-images="{{ $insurances->load_vehicle_images }}">View</button>
                                            @else
                                                <span>No images</span>
                                            @endif
                                        </td>
                                        <td>
                                            @if($insurances->bill_copy_images)
                                                <button type="button" class="btn btn-primary view-images" data-toggle="modal" data-target="#imageModal" data-images="{{ $insurances->bill_copy_images }}">View</button>
                                            @else
                                                <span>No images</span>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            @endif
                            </tbody>
                        </table>
                   
                    </div>
                </div>
            </div> 
        </div> 
    </div>

    <div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="imageModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="imageModalLabel">Images</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 id="imageModalContent" class="row"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="productModal" tabindex="-1" role="dialog" aria-labelledby="productModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="productModalLabel">Insurance Products</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 id="productModalContent" class="row">
                        <!-- Product table will be dynamically populated here -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="detailsModal" tabindex="-1" role="dialog" aria-labelledby="detailsModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="detailsModalLabel">More 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">
                    <div id="detailsModalContent" class="row">
                        <!-- The details will be dynamically inserted here -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="amountModal" tabindex="-1" role="dialog" aria-labelledby="amountModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="amountModalLabel">Amount 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">
                    <form id="amountForm">
                        <div class="row">
                            <div class="col-12">
                                <div class="form-group">
                                    <label for="totalAmount">Total Amount</label>
                                    <input type="text" class="form-control" id="totalAmount" name="totalAmount" readonly>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group">
                                    <label for="premiumPercentage">Premium Percentage (%)</label>
                                    <input type="number" class="form-control" id="premiumPercentage" name="premiumPercentage" value="0.5">
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group">
                                    <label for="premiumAmount">Premium Amount</label>
                                    <input type="text" class="form-control" id="premiumAmount" name="premiumAmount" readonly>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group">
                                    <label for="gstPercentage">GST Percentage (%)</label>
                                    <input type="number" class="form-control" id="gstPercentage" name="gstPercentage" value="18">
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group">
                                    <label for="gstAmount">GST Amount</label>
                                    <input type="text" class="form-control" id="gstAmount" name="gstAmount" readonly>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-group">
                                    <label for="finalAmount">Final Amount</label>
                                    <input type="text" class="form-control" id="finalAmount" name="finalAmount" readonly>
                                </div>
                            </div>
                        </div>
                        <input type="hidden" id="insuranceId" name="insuranceId">
                        <button type="button" class="btn btn-primary" id="saveAmount">Save</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    
    @include('components.footertext')
</div>
@endsection
@push('script')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
<script>
    $(document).ready(function() {

        $('#InsuranceTable').DataTable({
            "language": {
                "paginate": {
                    "previous": "<",
                    "next": ">"
                }
            }
        });

        $('.view-images').click(function() {
            var images = $(this).data('images'); 
            var modalContent = $('#imageModalContent');
            modalContent.empty(); 

            images.forEach(function(image) {
                var imgElement = $('<div class="col-4 mb-2"><img src="' + "{{ asset('images/vehicle') }}/" + image + '" class="img-fluid" alt="Image"></div>');
                modalContent.append(imgElement); 
            });
        });

        $('.view-products').click(function() {
            var insuranceId = $(this).data('insurance-id'); 
            var modalContent = $('#productModalContent');
            modalContent.empty(); 

            $.ajax({
                url: '/insurance/' + insuranceId + '/products', 
                method: 'GET',
                success: function(response) {
                    if (response && response.length > 0) {
                        var productTable = '<table class="table table-bordered"><thead><tr><th>Bill Number</th><th>Bill Date</th><th>Product Name</th><th>Product Type</th><th>Quantity</th><th>Rate per KG</th><th>Total</th></tr></thead><tbody>';

                        response.forEach(function(product) {
                            productTable += '<tr>';
                            productTable += '<td>' + product.bill_number + '</td>';
                            var date = new Date(product.bill_date);
                            var formattedDate = ('0' + date.getDate()).slice(-2) + '/' + ('0' + (date.getMonth() + 1)).slice(-2) + '/' + date.getFullYear();
                            productTable += '<td>' + formattedDate + '</td>';
                            productTable += '<td>' + product.product_name + '</td>';
                            productTable += '<td>' + product.product_type_name + '</td>';
                            productTable += '<td>' + product.quantity + '</td>';
                            productTable += '<td>' + product.rate_per_kg + '</td>';
                            productTable += '<td>' + product.total + '</td>';
                            productTable += '</tr>';
                        });

                        productTable += '</tbody></table>';
                        modalContent.append(productTable);
                    } else {
                        modalContent.append('<p>No products found for this insurance.</p>');
                    }
                },
                error: function() {
                    modalContent.append('<p>Error fetching insurance products.</p>');
                }
            });
        });
    
        $('.view-details').click(function() {
            var insuranceId = $(this).data('insurance-id'); 
            var modalContent = $('#detailsModalContent');
            modalContent.empty(); 

                $.ajax({
                    url: '/insurance/' + insuranceId + '/details',
                    method: 'GET',
                    success: function(response) {
                        if (response) {
                            var details = `
                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th>Driver Name</th>
                                            <th>Vehicle Number</th>
                                            <th>Transporter Name</th>
                                            <th>Transporter Mobile No.</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>${response.driver_name || 'N/A'}</td>
                                            <td>${response.vehicle_number || 'N/A'}</td>
                                            <td>${response.transporter_name || 'N/A'}</td>
                                            <td>${response.transporter_mobile_no || 'N/A'}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            `;
                            modalContent.append(details); 
                        } else {
                            modalContent.append('<p>No details found for this insurance.</p>');
                        }
                    },
                    error: function() {
                        modalContent.append('<p>Error fetching insurance details.</p>');
                    }
                });
        });
      
        $('.amount-link').click(function() {
            var insuranceId = $(this).data('insurance-id');
            var totalAmount = $(this).data('amount');
            var finalAmount = $(this).data('final-amount');
            var premiumPercentage = $(this).data('premium-percentage');
            var gstPercentage = $(this).data('gst-percentage');
            
            $('#totalAmount').val(totalAmount);
            $('#premiumPercentage').val(premiumPercentage);
            $('#gstPercentage').val(gstPercentage);
            $('#finalAmount').val(finalAmount);
            $('#insuranceId').val(insuranceId);

            // Calculate initial values
            calculateAmounts(totalAmount, premiumPercentage, gstPercentage);
            $('#amountModal').modal('show');
        });

        // Calculate premium, gst, and final amounts
        function calculateAmounts(totalAmount, premiumPercentage, gstPercentage) {
            // Ensure all inputs are numbers and default to 0 if they are not valid numbers
            totalAmount = parseFloat(totalAmount) || 0;
            premiumPercentage = parseFloat(premiumPercentage) || 0;
            gstPercentage = parseFloat(gstPercentage) || 0;
            
            // Calculate amounts
            var premiumAmount = (premiumPercentage / 100) * totalAmount;
            var gstAmount = (gstPercentage / 100) * premiumAmount;
            var finalAmount = premiumAmount + gstAmount;

            // Update the modal with the calculated values
            $('#premiumAmount').val(premiumAmount.toFixed(2));
            $('#gstAmount').val(gstAmount.toFixed(2));
            $('#finalAmount').val(finalAmount.toFixed(2));
        }

        // Listen for changes in percentages and recalculate
        $('#premiumPercentage, #gstPercentage').on('input', function() {
            var totalAmount = parseFloat($('#totalAmount').val()) || 0;
            var premiumPercentage = parseFloat($('#premiumPercentage').val()) || 0;
            var gstPercentage = parseFloat($('#gstPercentage').val()) || 0;
            calculateAmounts(totalAmount, premiumPercentage, gstPercentage);
        });

        // Save updated amounts
        $('#saveAmount').click(function() {
            var insuranceId = $('#insuranceId').val();
            var totalAmount = $('#totalAmount').val();
            var premiumPercentage = $('#premiumPercentage').val();
            var gstPercentage = $('#gstPercentage').val();
            var premiumAmount = $('#premiumAmount').val();
            var gstAmount = $('#gstAmount').val();
            var finalAmount = $('#finalAmount').val();

            $.ajax({
                url: '/insurance/update-amount/' + insuranceId,
                method: 'POST',
                data: {
                    _token: "{{ csrf_token() }}",
                    total_amount: totalAmount,
                    premium_percentage: premiumPercentage,
                    gst_percentage: gstPercentage,
                    premium_amount: premiumAmount,
                    gst_amount: gstAmount,
                    payable_amount: finalAmount
                },
                success: function(response) {
                    if (response.success) {
                        Swal.fire('Success', 'Amount details updated successfully!', 'success');
                        $('#amountModal').modal('hide');
                        setTimeout(() => {
                            window.location.reload();
                        }, 2000);
                    } else {
                        Swal.fire('Error', 'Failed to update amount details!', 'error');
                    }
                },
                error: function() {
                    Swal.fire('Error', 'An error occurred!', 'error');
                }
            });
        });
    });
</script>
@endpush