@extends('layouts/contentNavbarLayout')

@php
    $title = isset($commission) ? 'Edit' : 'Create';
@endphp
@section('title', "{$title} - {$title} Commission")
@section('page-style')
    <link href="{{ asset('assets/css/select2.min.css') }}" rel="stylesheet" />
    <style>
        .select2-container--default .select2-selection--multiple {
            height: 3rem;
        }
    </style>
@endsection

@section('content')
    <h4 class="py-3 mb-4">
        <span class="text-muted fw-light">
            <a href="{{ route('commission-roles') }}" class="text-muted text-decoration-none">Commission Roles List</a> /
        </span>
        {{ $title }}
    </h4>
    <!-- Basic Layout -->
    {{-- @dd($commission) --}}
    <div class="row">
        <div class="col-xl">
            <div class="card mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">{{ $title }} Commission Roles</h5>
                </div>
                <div class="card-body">
                    @php
                        $route = isset($commission)
                            ? route('commissionroles.update', $commission->id)
                            : route('commissionroles.store');
                    @endphp
                    <form action="{{ $route }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="form-floating form-floating-outline mb-4">
                            <input type="number" class="form-control @error('commission_rate') is-invalid @enderror"
                                id="basic-default-username" placeholder="Add commission" name="commission_rate"
                                value="{{ old('commission_rate', isset($commission) ? $commission->commission_rate : '') }}"
                                required />
                            <label for="basic-default-username">Set Commission</label>
                            @error('commission_rate')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="mb-4">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="input-group input-group-merge">
                                        <div class="form-floating form-floating-outline">
                                            <select name="agent_type" id="agent_type" class="form-select" required>
                                                <option value=""
                                                    {{ old('agent_type', isset($commission) ? '' : 'selected') }}>--Select
                                                    Agent--</option>
                                                <option value="field_agent"
                                                    {{ old('agent_type', isset($commission) && $commission->type == 'field_agent' ? 'selected' : '') }}>
                                                    Field Agent
                                                </option>
                                                <option value="external_agent"
                                                    {{ old('agent_type', isset($commission) && $commission->type == 'external_agent' ? 'selected' : '') }}>
                                                    External Agent
                                                </option>
                                            </select>
                                            @error('agent_type')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="input-group input-group-merge">
                                        <div class="form-floating form-floating-outline">
                                            <select name="agents" class="form-select" id="agents-list"
                                                data-selected-agent="{{ isset($commission) ? $commission->agent_id : '' }}"
                                                data-selected-customer="{{ isset($commission) ? $commission->customer_id : '' }}"
                                                data-selected-customer-all="{{ isset($commission) ? $commission->is_all_customers : '' }}">

                                            </select>

                                            @error('agents')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- <div class="col-md-12">
                            <div class="form-group">

                                <select name="customers[]" id="exampleFormControlSelect2"
                                    class="form-select form-control select2-multiple" multiple
                                    aria-label="Select Customers">
                                    <!-- Options will be dynamically added here -->
                                </select>
                            </div>
                        </div> --}}

                        <div class="col-md-12 mb-4">
                            <div class="input-group input-group-merge">
                                <div class="form-floating form-floating-outline">
                                    <select name="customers[]" id="exampleFormControlSelect2"
                                        class="form-select form-control select2-multiple" multiple
                                        aria-label="Select Customers" style="height:10rem">
                                        <!-- Options will be dynamically added here -->
                                    </select>

                                </div>
                            </div>
                        </div>

                        {{-- <div class="form-group">
                            <label for="customers">Select Customers</label>
                            <select name="customers[]" id="cutomers" class="form-select" multiple>
                                <!-- Options will be dynamically added here -->
                            </select>
                        </div> --}}

                        {{-- <div class="col-md-6">
                          <div class="input-group input-group-merge">
                              <div class="form-floating form-floating-outline">
                                  <select name="agents" class="form-select" id="fetch-users">
                                      <option value="">--Select Agent--</option>
                                      @foreach ($agents as $agent)
                                          <option value="{{ $agent->id }}">{{ $agent->name }}</option>
                                      @endforeach
                                  </select>
                                  <p class="text-danger">( Note: Please select agent and set commission on
                                      selected agent
                                      customers )</p>
                                  @error('agents')
                                      <div class="invalid-feedback">{{ $message }}</div>
                                  @enderror
                                  <div id="customers-list">
                                      <div id="hedding"></div>
                                      <div id="customer-container" class="mt-2"></div>
                                  </div>
                              </div>
                          </div>
                      </div> --}}
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-floating form-floating-outline mb-4">
                                    <input type="date" class="form-control @error('start_date') is-invalid @enderror"
                                        id="start_date" placeholder="Add commission" name="start_date"
                                        value="{{ old('start_date', isset($commission) ? \Carbon\Carbon::parse($commission->start_date)->format('Y-m-d') : '') }}" />
                                    <label for="start_date">Start Date</label>
                                    @error('start_date')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-floating form-floating-outline mb-4">
                                    <input type="date" class="form-control @error('end_date') is-invalid @enderror"
                                        id="end_date" placeholder="Add commission" name="end_date"
                                        value="{{ old('end_date', isset($commission) ? \Carbon\Carbon::parse($commission->end_date)->format('Y-m-d') : '') }}" />
                                    <label for="end_date">End Date</label>
                                    @error('end_date')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>


                        <button type="submit" class="btn btn-primary">
                            @isset($commission)
                                Update
                            @else
                                Create
                            @endisset
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('page-script')
    {{-- <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script> --}}
    <script src="{{ asset('assets/js/select2.min.js') }}"></script>
    <script>
        select2Initialise('exampleFormControlSelect2', 'Select Customers'); //initializing the multi select, for select box
        function select2Initialise(inputID, placeholder) {
            $('#' + inputID).select2({
                placeholder: placeholder, // Optional placeholder
                allowClear: true, // Option to allow clearing the selection
                dropdownCssClass: 'custom-select2-dropdown'
            });
        }
        // JavaScript to dynamically add/remove "required" attribute
        document.addEventListener('DOMContentLoaded', function() {
            const startDateField = document.getElementById('start_date');
            const endDateField = document.getElementById('end_date');

            if (startDateField) {
                startDateField.addEventListener('input', function() {
                    const startDate = this.value;

                    if (startDate) {
                        endDateField.setAttribute('required', 'required'); // Make end date required
                    } else {
                        endDateField.removeAttribute('required'); // Remove required if start date is empty
                    }
                });
            }
        });

        let specificCustomerIds = null;
        let forAllCustomers = null;

        $(document).ready(function() {
            let agentData = {}; // Store all agents

            // Prefetch all agents on page load
            $.ajax({
                url: '/get-agents',
                type: 'GET',
                success: function(response) {
                    if (response.success) {
                        agentData = response.data;

                        // Call populate function after agents are fetched
                        populateAgentsDropdown();

                        // On page load, check for a preselected agent and trigger the AJAX request
                        let selectedAgentId = $('#agents-list').data('selected-agent');
                        if (selectedAgentId) {
                            fetchCustomers(selectedAgentId);
                            // Store the selected customer globally
                            specificCustomerIds = $('#agents-list').data('selected-customer');
                            forAllCustomers = $('#agents-list').data('selected-customer-all');

                        }

                    }
                },
                error: function(xhr) {
                    console.error('Error fetching agent data:', xhr.responseText);
                }
            });



            // Function to populate agents dropdown
            function populateAgentsDropdown() {
                let agentType = $('#agent_type').val(); // Get the selected agent type
                let dropdown = $('#agents-list');
                let selectedAgentId = dropdown.data('selected-agent');

                dropdown.empty(); // Clear the dropdown
                dropdown.append('<option value="">--Select Agent--</option>'); // Default option

                if (!agentType) {
                    return; // Exit if no agent type is selected
                }

                // Show loading placeholder
                dropdown.append('<option disabled>Loading...</option>');

                // Add options based on agent type
                setTimeout(function() {
                    dropdown.empty();
                    dropdown.append('<option value="">--Select Agent--</option>'); // Default option

                    let agents = [];
                    if (agentType === 'field_agent') {
                        agents = agentData.field_agents || [];
                    } else if (agentType === 'external_agent') {
                        agents = agentData.external_agents || [];
                    }

                    if (agents.length > 0) {
                        agents.forEach(function(agent) {
                            dropdown.append(
                                `<option value="${agent.id}" ${agent.id == selectedAgentId ? 'selected' : ''}>${agent.name}</option>`
                            );
                        });

                        // Select the pre-selected value if it exists
                        let selectedAgent = dropdown.data(
                            'selected'); // Assuming preselected value is stored in `data-selected`
                        if (selectedAgent) {
                            dropdown.val(selectedAgent);
                        }
                    } else {
                        dropdown.append('<option disabled>No agents found</option>');
                    }
                }, 100); // Simulate minimal delay to show the "Loading..." state
            }

            // Call on change
            $('#agent_type').on('change', function() {
                populateAgentsDropdown();
            });

            // Call on page load after prefetching agents
            $('#agent_type').trigger('change');

            // $('#agents-list').on('change', function() {
            //     let selectedAgentId = $(this).val(); // Get the selected agent ID

            //     if (selectedAgentId) {
            //         $.ajax({
            //             url: '/get-customers-of-agent', // Replace with your actual route
            //             type: 'GET',
            //             data: {
            //                 agent_id: selectedAgentId,
            //             },
            //             success: function(response) {
            //                 if (response.success) {
            //                     const customers = response
            //                         .customers; // Retrieve the customers data
            //                     let customerDropdown = $('#exampleFormControlSelect2');
            //                     customerDropdown.empty(); // Clear any existing options

            //                     if (customers.length > 0) {

            //                         customerDropdown.append(
            //                             '<option value="all">Select All</option>');
            //                         // Append each customer to the dropdown
            //                         customers.forEach(function(customer) {
            //                             customerDropdown.append(
            //                                 `<option value="${customer.id}">${customer.name}</option>`
            //                             );
            //                         });
            //                     } else {
            //                         // If no customers are found, add a placeholder option
            //                         customerDropdown.append(
            //                             `<option disabled>No customers found</option>`
            //                         );
            //                     }

            //                     // Reinitialize the Select2 dropdown to reflect the new options
            //                     customerDropdown.select2({
            //                         placeholder: 'Select Customers',
            //                         allowClear: true,
            //                         width: '100%',
            //                     });
            //                 }
            //             },
            //             error: function(xhr) {
            //                 console.error('Error fetching customer details:', xhr.responseText);
            //             },
            //         });
            //     } else {
            //         // Clear the dropdown if no agent is selected
            //         $('#exampleFormControlSelect2')
            //             .empty()
            //             .select2({
            //                 placeholder: 'Select Customers',
            //                 allowClear: true,
            //                 width: '100%',
            //             });
            //     }
            // });

            // Trigger customer fetch when agent is selected
            $('#agents-list').on('change', function() {
                let selectedAgentId = $(this).val(); // Get the selected agent ID
                if (selectedAgentId) {
                    fetchCustomers(selectedAgentId);
                } else {
                    clearCustomersDropdown();
                }
            });


            // Fetch customers for a specific agent
            function fetchCustomers(agentId) {
                $.ajax({
                    url: '/get-customers-of-agent', // Replace with your actual route
                    type: 'GET',
                    data: {
                        agent_id: agentId,
                    },
                    success: function(response) {
                        if (response.success) {
                            const customers = response.customers; // Retrieve the customers data
                            let customerDropdown = $('#exampleFormControlSelect2');
                            customerDropdown.empty(); // Clear any existing options

                            // console.log(specificCustomerIds, 'specificCustomerIds');



                            // console.log(selectedIdsArray, 'specificCustomerIds (Array)');

                            if (customers.length > 0) {

                                if (specificCustomerIds) {

                                    customerDropdown.append('<option value="all">Select All</option>');

                                    const selectedIdsArray = specificCustomerIds.split(',').map(id => id
                                        .trim());

                                    customers.forEach(function(customer) {
                                        const isSelected = selectedIdsArray.includes(customer.id
                                            .toString());
                                        customerDropdown.append(
                                            `<option value="${customer.id}" ${
                                                isSelected ? 'selected' : ''
                                                }>${customer.name}</option>`
                                        );
                                    });
                                } else if (forAllCustomers) {
                                    customerDropdown.append(
                                        '<option value="all" selected>Select All</option>');
                                    customers.forEach(function(customer) {
                                        customerDropdown.append(
                                            `<option value="${customer.id}">${customer.name}</option>`
                                        );
                                    });
                                } else {
                                    customerDropdown.append('<option value="all">Select All</option>');

                                    customers.forEach(function(customer) {
                                        customerDropdown.append(
                                            `<option value="${customer.id}">${customer.name}</option>`
                                        );
                                    });
                                }
                            } else {
                                customerDropdown.append(`<option disabled>No customers found</option>`);
                            }

                            customerDropdown.select2({
                                placeholder: 'Select Customers',
                                allowClear: true,
                                width: '100%',
                            });
                        }
                    },
                    error: function(xhr) {
                        console.error('Error fetching customer details:', xhr.responseText);
                    }
                });
            }

            // Clear customer dropdown
            function clearCustomersDropdown() {
                $('#exampleFormControlSelect2')
                    .empty()
                    .select2({
                        placeholder: 'Select Customers',
                        allowClear: true,
                        width: '100%',
                    });
            }

        });





        $(document).ready(function() {
            $('#fetch-users').change(function() {
                const agentId = $(this).val(); // Get selected agent ID
                if (agentId) {
                    // Make AJAX request
                    $.ajax({
                        url: '/get-agent-customers', // Update the URL as per your route
                        type: 'POST',
                        data: {
                            agent_id: agentId,
                            _token: '{{ csrf_token() }}' // CSRF token for security
                        },
                        success: function(response) {
                            // Clear the customer container
                            $('#customer-container').empty();
                            // Check if customers exist
                            if (response.length > 0) {
                                let row = $('<div class="row"></div>');
                                let heading = 'Selected agent customers';
                                $('#hedding').append(heading);
                                response.forEach(function(customer, index) {
                                    // Create checkbox and label
                                    const checkboxHTML = `
                                  <div class="col-md-3 mb-2">
                                      <div class="form-check">
                                          <input type="checkbox" name="customer_id[]" class="form-check-input" id="customer-${customer.id}" value="${customer.id}">
                                          <label class="form-check-label" for="customer-${customer.id}">${customer.name}</label>
                                      </div>
                                  </div>
                              `;

                                    row.append(checkboxHTML);
                                    // Add row to container after every 4 customers
                                    if ((index + 1) % 4 === 0) {
                                        $('#customer-container').append(row);
                                        row = $('<div class="row"></div>');
                                    }
                                });
                                // Append remaining row
                                $('#customer-container').append(row);
                            } else {
                                $('#customer-container').append('<p>No customers found.</p>');
                            }
                        },
                        error: function(xhr) {
                            console.error('Error:', xhr.responseText); // Error handling
                        }
                    });
                } else {
                    // Clear the customer list if no agent is selected
                    $('#customer-container').empty();
                }
            });
        });
    </script>
@endsection