@extends('layouts.app')

@section('title', 'Commission Settings')

@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">Commission Settings</h4>
                    @can('Create commission setting')
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                            data-bs-target="#createSettingModal" id="createSettingBtn"><i class="mdi mdi-plus me-1"></i>
                            Create Commission Setting</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="commission-settings-table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Carrier</th>
                            <th>State</th>
                            <th>Commission (USD)</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($commissionSettings as $setting)
                            <tr>
                                <td>{{ $setting->id }}</td>
                                <td>{{ $setting->carrier->name }}</td>
                                <td>{{ $setting->state }}</td>
                                <td>{{ $setting->commission_usd }}</td>
                                <td>
                                    @can('Update commission setting')
                                        <button class="btn btn-warning btn-sm editSettingBtn"
                                            data-id="{{ $setting->id }}"><i class="fas fa-edit"></i></button>
                                    @endcan

                                    @can('Delete commission setting')
                                        <button class="btn btn-danger btn-sm" data-bs-toggle="modal"
                                            data-bs-target="#deleteModal" data-setting-id="{{ $setting->id }}"
                                            data-setting-carrier="{{ $setting->carrier->name }}"
                                            data-setting-state="{{ $setting->state }}"><i
                                                class="fa fa-trash"></i></button>
                                    @endcan
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="createSettingModal" tabindex="-1" aria-labelledby="createSettingModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form id="createSettingForm" method="POST" action="{{ route('commission-settings.store') }}">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title" id="createSettingModalLabel">Create Commission Setting</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="carrier_id" class="form-label">Carrier:</label>
                            <select name="carrier_id" id="carrier_id" class="form-control" required>
                                <option value="">Select Carrier</option>
                                @foreach ($carriers as $carrier)
                                    <option value="{{ $carrier->id }}">{{ $carrier->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="state" class="form-label">State:</label>
                            <select name="state" id="state" class="form-control">
                                <option value="">Select State (Optional)</option>
                                @foreach ($states as $state)
                                    <option value="{{ $state }}">{{ $state }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="commission_usd" class="form-label">Commission (USD):</label>
                            <input type="number" name="commission_usd" id="commission_usd" class="form-control"
                                step="0.01" required>
                        </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>

    <div class="modal fade" id="editSettingModal" tabindex="-1" aria-labelledby="editSettingModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form id="editSettingForm" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="modal-header">
                        <h5 class="modal-title" id="editSettingModalLabel">Edit Commission Setting</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="edit_carrier_id" class="form-label">Carrier:</label>
                            <select name="carrier_id" id="edit_carrier_id" class="form-control" required>
                                <option value="">Select Carrier</option>
                                @foreach ($carriers as $carrier)
                                    <option value="{{ $carrier->id }}">{{ $carrier->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="edit_state" class="form-label">State:</label>
                            <select name="state" id="edit_state" class="form-control">
                                <option value="">Select State (Optional)</option>
                                @foreach ($states as $state)
                                    <option value="{{ $state }}">{{ $state }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="edit_commission_usd" class="form-label">Commission (USD):</label>
                            <input type="number" name="commission_usd" id="edit_commission_usd" class="form-control"
                                step="0.01" required>
                        </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>

    <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 commission setting for carrier: <span id="settingCarrier"></span>
                    and state: <span id="settingState"></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() {
            $('#commission-settings-table').DataTable({
                responsive: true,
                lengthChange: false
            });

            // Show modal for creating a new setting
            $('#createSettingBtn').on('click', function() {
                $('#createSettingForm').reset();
                $('#createSettingModal').modal('show');
            });

            // Edit setting
            $(document).on('click', '.editSettingBtn', function() {
                let id = $(this).data('id');
                $.get("{{ url('commission-settings') }}/" + id + "/edit", function(data) {
                    $('#editSettingModalLabel').text('Edit Commission Setting');
                    $('#edit_carrier_id').val(data.carrier_id);
                    $('#edit_state').val(data.state);
                    $('#edit_commission_usd').val(data.commission_usd);
                    $('#editSettingForm').attr('action', "{{ url('commission-settings') }}/" +
                        id);
                    $('#editSettingModal').modal('show');
                });
            });

            // Handle form submission for edit
            $('#editSettingForm').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) {
                        $('#editSettingModal').modal('hide');
                        location.reload(); // Reload the page to see changes
                    },
                    error: function(xhr) {
                        let errors = xhr.responseJSON.errors;
                        let errorMessages = '';
                        for (let key in errors) {
                            if (errors.hasOwnProperty(key)) {
                                errorMessages += errors[key] + '\n';
                            }
                        }
                        alert(errorMessages);
                    }
                });
            });

            // Handle Delete Modal
            var deleteModal = document.getElementById('deleteModal');
            deleteModal.addEventListener('show.bs.modal', function(event) {
                var button = event.relatedTarget;
                var settingId = button.getAttribute('data-setting-id');
                var settingCarrier = button.getAttribute('data-setting-carrier');
                var settingState = button.getAttribute('data-setting-state');

                var form = deleteModal.querySelector('#delete-form');
                var carrierField = deleteModal.querySelector('#settingCarrier');
                var stateField = deleteModal.querySelector('#settingState');

                carrierField.textContent = settingCarrier;
                stateField.textContent = settingState;
                form.action = `/commission-settings/${settingId}`;
            });
        });
    </script>
@endsection