@extends('layouts.app')

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

@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">Products</h4>
                    @can('Create product')
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                            data-bs-target="#createProductModal" id="createProductBtn"><i class="mdi mdi-plus me-1"></i> Create
                            Product</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="products-table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Carrier</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- Data will be loaded via AJAX -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Create Product Modal -->
    <div class="modal fade" id="createProductModal" tabindex="-1" aria-labelledby="createProductModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form id="createProductForm" method="POST">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title" id="createProductModalLabel">Create Product</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="createProductName" class="form-label">Name</label>
                            <input type="text" class="form-control" id="createProductName" name="name" required>
                        </div>
                        <div class="mb-3">
                            <label for="createCarrierSelect" class="form-label">Select Carrier</label>
                            <select class="form-select" id="createCarrierSelect" name="carrier_id" required>
                                @foreach ($carriers as $carrier)
                                    <option value="{{ $carrier->id }}">{{ $carrier->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-check form-switch mb-3">
                            <input class="form-check-input" type="checkbox" id="createProductIsActive" name="isActive"
                                checked>
                            <label class="form-check-label" for="createProductIsActive">Status</label>
                        </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 Product Modal -->
    <div class="modal fade" id="editProductModal" tabindex="-1" aria-labelledby="editProductModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form id="editProductForm" method="POST">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title" id="editProductModalLabel">Edit Product</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="editProductName" class="form-label">Name</label>
                            <input type="text" class="form-control" id="editProductName" name="name" required>
                        </div>
                        <div class="mb-3">
                            <label for="editCarrierSelect" class="form-label">Select Carrier</label>
                            <select class="form-select" id="editCarrierSelect" name="carrier_id" required>
                                @foreach ($carriers as $carrier)
                                    <option value="{{ $carrier->id }}">{{ $carrier->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-check form-switch mb-3">
                            <input class="form-check-input" type="checkbox" id="editProductIsActive" name="isActive">
                            <label class="form-check-label" for="editProductIsActive">Status</label>
                        </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 product: <span id="productName"></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 = $('#products-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{{ route('products.datatable') }}',
                columns: [{
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'carrier_name',
                        name: 'carrier.name'
                    },
                    {
                        data: 'status',
                        name: 'status'
                    },
                    {
                        data: 'actions',
                        name: 'actions',
                        orderable: false,
                        searchable: false
                    }
                ],
                responsive: true,
                lengthChange: false
            });

            // Show modal for creating a new product
            $('#createProductBtn').on('click', function() {
                $('#createProductForm').attr('action', '{{ route('products.store') }}');
                $('#createProductForm')[0].reset();
                $('#createProductModalLabel').text('Create Product');
                $('#createProductIsActive').prop('checked', true);
            });

            // Handle form submission for create
            $('#createProductForm').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) {
                        $('#createProductModal').modal('hide');
                        table.ajax.reload();
                        alert('Product created successfully!');
                    },
                    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);
                    }
                });
            });

            // Edit product
            $(document).on('click', '.editProductBtn', function() {
                let id = $(this).data('id');
                $.get("{{ url('products') }}/" + id + "/edit", function(data) {
                    $('#editProductModalLabel').text('Edit Product');
                    $('#editProductName').val(data.name);
                    $('#editCarrierSelect').val(data.carrier_id);
                    $('#editProductIsActive').prop('checked', data.is_active);
                    $('#editProductForm').attr('action', "{{ url('products') }}/" + id);
                    // Remove any existing hidden method field and add a new one
                    $('#editProductForm input[name="_method"]').remove();
                    $('#editProductForm').append(
                    '<input type="hidden" name="_method" value="PUT">');
                    $('#editProductModal').modal('show');
                });
            });

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

            // Handle form submission for edit
            $('#editProductForm').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) {
                        $('#editProductModal').modal('hide');
                        table.ajax.reload();
                        alert('Product updated successfully!');
                    },
                    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);
                    }
                });
            });

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

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

                nameField.textContent = productName;
                form.action = `/products/${productId}`;
            });

            // 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();
                        alert('Product deleted successfully!');
                    },
                    error: function(xhr) {
                        alert('Error deleting product: ' + xhr.responseJSON.message);
                    }
                });
            });
        });
    </script>
@endsection