@extends('layouts.app')

@section('title', 'Master Plans')

@section('page-specific-style')
    <link href="{{ asset('assets/libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css') }}" rel="stylesheet"
        type="text/css" />
    <link href="{{ asset('assets/libs/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css') }}" rel="stylesheet"
        type="text/css" />
    <link href="{{ asset('assets/libs/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css') }}" rel="stylesheet"
        type="text/css" />
@endsection

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h4 class="mb-0">Plans</h4>
                    @can('Create plan')
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                            data-bs-target="#createPlanModal"><i class="mdi mdi-plus me-1"></i> Create Plan</button>
                    @endcan
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                @include('includes.alerts')
                @include('includes.errors')
                <table class="table table-bordered dt-responsive nowrap w-100" id="plans-table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Carrier</th>
                            <th>Product</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- Data will be loaded via AJAX -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Create Plan Modal -->
    <div class="modal fade" id="createPlanModal" tabindex="-1" aria-labelledby="createPlanModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form id="createPlanForm" method="POST">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title" id="createPlanModalLabel">Create Plan</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="createPlanName" class="form-label">Name</label>
                            <input type="text" class="form-control" id="createPlanName" name="name" required>
                        </div>
                        <div class="mb-3">
                            <label for="createCarrier" class="form-label">Carrier</label>
                            <select class="form-select" id="createCarrier" name="master_carrier_id">
                                <option value="">Select Carrier</option>
                                <!-- Options will be loaded via AJAX -->
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="createProduct" class="form-label">Product</label>
                            <select class="form-select" id="createProduct" name="master_product_id">
                                <option value="">Select Product</option>
                                <!-- Options will be loaded via AJAX -->
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Edit Plan Modal -->
    <div class="modal fade" id="editPlanModal" tabindex="-1" aria-labelledby="editPlanModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form id="editPlanForm" method="POST">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title" id="editPlanModalLabel">Edit Plan</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="editPlanName" class="form-label">Name</label>
                            <input type="text" class="form-control" id="editPlanName" name="name" required>
                        </div>
                        <div class="mb-3">
                            <label for="editCarrier" class="form-label">Carrier</label>
                            <select class="form-select" id="editCarrier" name="master_carrier_id">
                                <option value="">Select Carrier</option>
                                <!-- Options will be loaded via AJAX -->
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="editProduct" class="form-label">Product</label>
                            <select class="form-select" id="editProduct" name="master_product_id">
                                <option value="">Select Product</option>
                                <!-- Options will be loaded via AJAX -->
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Delete Confirmation Modal -->
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">Confirm Deletion</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    Are you sure you want to delete the plan: <span id="planName"></span>?
                </div>
                <div class="modal-footer">
                    <form id="delete-form" action="" method="POST">
                        @csrf
                        @method('DELETE')
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-danger">Delete</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('page-specific-script')
    <script src="{{ asset('assets/libs/datatables.net/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/libs/datatables.net-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('assets/libs/datatables.net-responsive/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('assets/libs/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js') }}"></script>

    <script>
        $(document).ready(function() {
            var table = $('#plans-table').DataTable({
                processing: true,
                serverSide: true,
                responsive: true,
                lengthChange: true,
                ajax: {
                    url: "{{ route('plans.datatable') }}",
                    type: 'GET'
                },
                columns: [{
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'carrier_name',
                        name: 'carrier.name'
                    },
                    {
                        data: 'product_name',
                        name: 'product.name'
                    },
                    {
                        data: 'status',
                        name: 'is_active',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'actions',
                        name: 'actions',
                        orderable: false,
                        searchable: false
                    }
                ],
                order: [
                    [0, 'desc']
                ],
                pageLength: 25,
                lengthMenu: [
                    [10, 25, 50, 100, -1],
                    [10, 25, 50, 100, "All"]
                ]
            });

            // Function to load carriers
            function loadCarriers(selectElement, selectedValue = null) {
                $.ajax({
                    url: "{{ route('plans.carriers') }}",
                    type: 'GET',
                    success: function(carriers) {
                        selectElement.empty().append('<option value="">Select Carrier</option>');
                        $.each(carriers, function(index, carrier) {
                            var selected = selectedValue == carrier.id ? 'selected' : '';
                            selectElement.append('<option value="' + carrier.id + '" ' +
                                selected + '>' + carrier.name + '</option>');
                        });
                    },
                    error: function() {
                        console.error('Error loading carriers');
                    }
                });
            }

            // Function to load products
            function loadProducts(selectElement, carrierId = null, selectedValue = null) {
                var url = "{{ route('plans.products') }}";
                if (carrierId) {
                    url += '?carrier_id=' + carrierId;
                }

                $.ajax({
                    url: url,
                    type: 'GET',
                    success: function(products) {
                        selectElement.empty().append('<option value="">Select Product</option>');
                        $.each(products, function(index, product) {
                            var selected = selectedValue == product.id ? 'selected' : '';
                            selectElement.append('<option value="' + product.id + '" ' +
                                selected + '>' + product.name + '</option>');
                        });
                    },
                    error: function() {
                        console.error('Error loading products');
                    }
                });
            }

            // Show modal for creating a new plan
            $('#createPlanModal').on('show.bs.modal', function() {
                $('#createPlanForm')[0].reset();
                loadCarriers($('#createCarrier'));
                loadProducts($('#createProduct'));
            });

            // Show modal for editing a plan
            $('#editPlanModal').on('show.bs.modal', function() {
                loadCarriers($('#editCarrier'));
                loadProducts($('#editProduct'));
            });

            // Handle carrier change for create form (cascading dropdown)
            $('#createCarrier').on('change', function() {
                var carrierId = $(this).val();
                loadProducts($('#createProduct'), carrierId);
            });

            // Handle carrier change for edit form (cascading dropdown)
            $('#editCarrier').on('change', function() {
                var carrierId = $(this).val();
                loadProducts($('#editProduct'), carrierId);
            });

            // Handle form submission for create
            $('#createPlanForm').on('submit', function(e) {
                e.preventDefault();
                let actionUrl = "{{ route('plans.store') }}";
                let formData = $(this).serialize();

                $.ajax({
                    type: 'POST',
                    url: actionUrl,
                    data: formData,
                    success: function(response) {
                        $('#createPlanModal').modal('hide');
                        table.ajax.reload(null, false); // Reload DataTable
                    },
                    error: function(xhr) {
                        let errors = xhr.responseJSON.errors;
                        let errorMessages = '';
                        for (let key in errors) {
                            if (errors.hasOwnProperty(key)) {
                                errorMessages += errors[key][0] + '\n';
                            }
                        }
                        alert(errorMessages);
                    }
                });
            });

            $(document).on('click', '.editPlanBtn', function() {
                let id = $(this).data('id');
                $.get("{{ url('plans') }}/" + id + "/edit", function(data) {
                    $('#editPlanModalLabel').text('Edit Plan');
                    $('#editPlanName').val(data.plan.name);

                    // Load carriers and set selected value
                    loadCarriers($('#editCarrier'), data.plan.master_carrier_id);

                    // Load products filtered by carrier and set selected value
                    loadProducts($('#editProduct'), data.plan.master_carrier_id, data.plan
                        .master_product_id);

                    $('#editPlanForm').attr('action', "{{ url('plans') }}/" + id);
                    // Remove any existing hidden method field and add a new one
                    $('#editPlanForm input[name="_method"]').remove();
                    $('#editPlanForm').append('<input type="hidden" name="_method" value="PUT">');
                    $('#editPlanModal').modal('show');
                });
            });

            // Handle form submission for edit
            $('#editPlanForm').on('submit', function(e) {
                e.preventDefault();
                let actionUrl = $(this).attr('action');
                let formData = $(this).serialize();

                $.ajax({
                    type: 'POST',
                    url: actionUrl,
                    data: formData,
                    success: function(response) {
                        $('#editPlanModal').modal('hide');
                        table.ajax.reload(null, false); // Reload DataTable
                    },
                    error: function(xhr) {
                        let errors = xhr.responseJSON.errors;
                        let errorMessages = '';
                        for (let key in errors) {
                            if (errors.hasOwnProperty(key)) {
                                errorMessages += errors[key][0] + '\n';
                            }
                        }
                        alert(errorMessages);
                    }
                });
            });

            // Clean up edit form when modal is hidden
            $('#editPlanModal').on('hidden.bs.modal', function() {
                $('#editPlanForm')[0].reset();
                $('#editPlanForm input[name="_method"]').remove();
            });

            // Handle Delete Modal
            var deleteModal = document.getElementById('deleteModal');
            deleteModal.addEventListener('show.bs.modal', function(event) {
                var button = event.relatedTarget;
                var planId = button.getAttribute('data-plan-id');
                var planName = button.getAttribute('data-plan-name');

                var form = deleteModal.querySelector('#delete-form');
                var nameField = deleteModal.querySelector('#planName');

                nameField.textContent = planName;
                form.action = `/plans/${planId}`;
            });

            // Handle delete form submission
            $('#delete-form').on('submit', function(e) {
                e.preventDefault();
                let actionUrl = $(this).attr('action');
                let formData = $(this).serialize();

                $.ajax({
                    type: 'POST',
                    url: actionUrl,
                    data: formData,
                    success: function(response) {
                        $('#deleteModal').modal('hide');
                        table.ajax.reload(null, false); // Reload DataTable
                    },
                    error: function(xhr) {
                        alert('Error deleting plan. Please try again.');
                    }
                });
            });
        });
    </script>
@endsection