@extends('layouts.app')
@section('content')
<div class="app sidebar-mini">
    <!-- Page -->
    <div class="page">
        <div class="page-main">
            <!-- App-Content -->
            <div class="app-content main-content">
                <div class="side-app">
                    <!--app header-->
                    @include('layouts.appheader')
                    <!--/app header-->
                    <div class="containersection">
                        <!--Page header-->
                        <div class="page-header">
                            <div class="page-leftheader"></div>
                            <div class="flashmsgec">
                                @include('layouts.flashmsg')
                            </div>
                            <div class="page-rightheader"></div>
                        </div>
                        <!--End Page header-->
                        <div class="card carddivision">
                            <div class="row">
                                <!-- Side Menu Bar Start -->
                                <div class="ringimaimenubar col-lg-1 col-md-1 col-sm-1 col-xs-1">
                                    @include('layouts.sidemenubar')
                                </div>
                                <!-- Side Menu Bar End -->
                                <!-- Main View Start -->
                                <div class="ringimaimain col-lg-11 col-md-11 col-sm-11 col-xs-11">
                                    <div class="row">
                                        <div class="cardleft col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                            <div class="card carddivision">
                                                <div class="card-header mb-4">
                                                    <div class="card-title">Google Places Business Finder</div>
                                                    @php use Illuminate\Support\Str; @endphp
                                                    @if(empty($cust_pref))
                                                    <div class="btnwrapper">
                                                    <button type="button" class="setupprefbtn w-100" id="setupr"> Setup Preference
                                                    </button>
                                                    </div>
                                                    @else
                                                        <input type="hidden" id="pref_phone_number_id" value="{{ $cust_pref->phone_number_id }}">
                                                        <input type="hidden" id="pref_assistant_id" value="{{ $cust_pref->assistant_or_workflow_id }}">
                                                        @php
                                                        // Ensure we can search by value even if the array has custom keys
                                                        $selectedNumberText = 'Unknown Number';
                                                        $selectedAssistantText = 'Unknown Assistant/Workflow';

                                                        // Find selected phone number
                                                        foreach ($numbers as $num) {
                                                            if (isset($num['id']) && $num['id'] === $cust_pref->phone_number_id) {
                                                                $selectedNumberText = $num['formatted'] ?? $num['number'] ?? 'Unknown Number';
                                                                break;
                                                            }
                                                        }

                                                        // Find Assistant / Workflow name
                                                        if (Str::startsWith($cust_pref->assistant_or_workflow_id, 'A_')) {
                                                            $assistantId = Str::after($cust_pref->assistant_or_workflow_id, 'A_');
                                                            foreach ($assistants as $asst) {
                                                                if ($asst['id'] === $assistantId) {
                                                                    $selectedAssistantText = $asst['name'];
                                                                    break;
                                                                }
                                                            }
                                                        } elseif (Str::startsWith($cust_pref->assistant_or_workflow_id, 'W_')) {
                                                            $workflowId = Str::after($cust_pref->assistant_or_workflow_id, 'W_');
                                                            foreach ($workflows as $wf) {
                                                                if ($wf['id'] === $workflowId) {
                                                                    $selectedAssistantText = $wf['name'];
                                                                    break;
                                                                }
                                                            }
                                                        }
                                                    @endphp
                                                    <div class="btnwrapper">
                                                        <div id="preferenceSummary" class="preferencesummary mt-3" style="display:inline-block;position: relative;">
                                                            <div>
                                                                <a class="d-flex mb-1"><span class="material-symbols-outlined">phone_in_talk</span> {{ $selectedNumberText }}</a>
                                                                <span class="d-flex mb-1 asswfsec"><span class="material-symbols-outlined">supervisor_account</span> {{ $selectedAssistantText }}</span>
                                                            </div>
                                                            <button type="button" class="editprefbtn" id="editPrefBtn">
                                                                <i class="fe fe-edit"></i>
                                                            </button>
                                                            <button type="button" class="delprefbtn" id="delPrefBtn">
                                                                <i class="fe fe-trash"></i>
                                                            </button>
                                                        </div>
                                                    </div>

                                                    @endif
                                                </div>
                                                <div class="card-body cardbody">
                                                    @if(session('error'))
                                                        <div class="alert alert-danger busierrosec">{{ session('error') }}</div>
                                                    @endif
                                                    <form id="businessSearchForm" method="POST" action="{{ route('businesses.fetch') }}" class="mb-4">
                                                        @csrf
                                                        <input type="hidden" name="user_timezone" id="user_timezone_fetch"/>
                                                        <div class="row filterrow">
                                                            <div class="filterformdiv searchfilter1 col-lg-3 col-md-6 col-sm-12 mb-0">
                                                                <div class="form-group">
                                                                    <label class="form-label">Search Text <small>(i.e. City / State / Suburb / Address)</small> </label>
                                                                    <input type="text" name="city" class="form-control" value="{{ request('callId') }}" placeholder="e.g. Sydney"/>
                                                                </div>
                                                            </div>
                                                            <div class="filterformdiv searchfilter2 col-lg-3 col-md-6 col-sm-12 mb-0">
                                                                <div class="form-group">
                                                                    <label class="form-label">Postal Code </label>
                                                                    <input type="text" name="postalCode" class="form-control" value="{{ request('callId') }}" placeholder="e.g. 2000"/>
                                                                </div>
                                                            </div>
                                                            <div class="filterformdiv searchfilter3 col-lg-3 col-md-6 col-sm-12 mb-0">
                                                                <div class="form-group">
                                                                    <label class="form-label">Category </label>
                                                                    <input type="text" name="category" class="form-control" value="{{ request('callId') }}" placeholder="e.g. restaurants"/>
                                                                </div>
                                                            </div>
                                                            <div class="filterformbtn searchfilter4 col-lg-3 col-md-12 col-sm-12 mb-0">
                                                                <div class="form-group">
                                                                    <button class="filterbtn" type="submit">Search</button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </form>
                                                    
                                                    <div id="resultsContainer"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- <div class="card-body cardbody schedulecls" style="display: none;">
                                        <div class="row">
                                            <div class="cardleft col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                                <div class="card carddivision commcard" style="color: #ffffff;">
                                                    Schedule a Call
                                                </div>
                                                <div class="card-body cardbody">
                                                    <form id="selectedBusinessesForm" method="POST" action="{{ route('businesses.schedule') }}">
                                                            @csrf
                                                        <input type="hidden" name="user_timezone" id="user_timezone"/>
                                                        <div class="row">
                                                            <div class="outboundform col-lg-3 col-md-6 col-sm-12 col-md-12">
                                                                <div class="form-group">
                                                                    <label class="form-label">Phone Number <span class="text-red">*</span></label>
                                                                    <select name="phone_number_id" class="form-control select2 select2-show-search" required>
                                                                        <option value="">Select Phone Number</option>
                                                                        @foreach ($numbers as $number)
                                                                            <option value="{{ $number['id'] }}" {{ old('phone_number_id') == $number['id'] ? 'selected' : '' }}>{{ $number['formatted'] }}</option>
                                                                        @endforeach
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="outboundform col-lg-3 col-md-6 col-sm-12 col-md-12">
                                                                <div class="form-group">
                                                                    <label class="form-label d-flex"><span class="material-symbols-outlined">supervisor_account</span> Assistant  / <span class="material-symbols-outlined">Automation</span> Workflow <span class="text-red">*</span></label>
                                                                    <select name="assistant_id" class="form-control select2 select2-show-search select2a" required>
                                                                        <option value="" style="color: #868a91;">Select Assistant/Workflow</option>
                                                                        @foreach ($assistants as $assistant)
                                                                            <option value="A_{{ $assistant['id'] }}" data-type="assistant">{{ $assistant['name'] }}</option>
                                                                        @endforeach
                                                                        @foreach ($workflows as $workflow)
                                                                            <option value="W_{{ $workflow['id'] }}" data-type="workflow">{{ $workflow['name'] }}</option>
                                                                        @endforeach
                                                                    </select>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="outboundformbtn col-lg-6 col-md-12 col-sm-12 col-md-12">
                                                                <div class="form-group">
                                                                    <button type="submit" class="savebtn"><i class="fe fe-phone-call"></i>&nbsp;&nbsp;Schedule a call</button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div id="ajax-loading" style="display:none;">
                                                            <center><span class="outboundloader"></span></center>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div> -->
                                    <!-- Right Slide Panel -->
                                    <div id="scheduleSlidePanel" class="schedule-slide-panel1">
                                        <div class="slide-panel-header">
                                            <h4 class="m-0">Schedule a Call</h4>
                                            <button type="button" class="close-panel" id="closePanelBtn">&times;</button>
                                        </div>
                                        <div class="slide-panel-content">
                                            <form id="selectedBusinessesForm" method="POST" action="{{ route('businesses.schedule') }}">
                                                @csrf
                                                <input type="hidden" name="user_timezone" id="user_timezone"/>
                                                <div class="outboundform col-lg-12 col-md-12 col-sm-12 col-md-12">
                                                    <div class="form-group">
                                                        <label class="form-label">Phone Number <span class="text-red">*</span></label>
                                                        <select name="phone_number_id" class="form-control select2" required>
                                                            <option value="">Select Phone Number</option>
                                                            @foreach ($numbers as $number)
                                                                <option value="{{ $number['id'] }}">{{ $number['formatted'] }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="outboundform col-lg-12 col-md-12 col-sm-12 col-md-12">
                                                    <div class="form-group">
                                                        <label class="form-label">Assistant / Workflow <span class="text-red">*</span></label>
                                                        <select name="assistant_id" class="form-control select2" required>
                                                            <option value="">Select Assistant/Workflow</option>
                                                            @foreach ($assistants as $assistant)
                                                                <option value="A_{{ $assistant['id'] }}">{{ $assistant['name'] }}</option>
                                                            @endforeach
                                                            @foreach ($workflows as $workflow)
                                                                <option value="W_{{ $workflow['id'] }}">{{ $workflow['name'] }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                {{-- DNC Checkbox --}}
                                                <div class="setupprefcheckbox col-lg-12 col-md-12 col-sm-12 col-md-12">
                                                    <div class="form-group">
                                                        <input type="checkbox" name="check_dnc" id="check_dnc_new" value="1">
                                                        <label for="check_dnc" class="form-check-label">Check Do Not Call (DNC) before calling</label>
                                                    </div>
                                                </div>

                                                {{-- Skip Recent Calls Checkbox + Days Input --}}
                                                <div class="setupprefcheckbox col-lg-12 col-md-12 col-sm-12 col-md-12">
                                                    <div class="form-group d-flex align-items-center gap-2">
                                                        <input type="checkbox" name="skip_recent_enabled" id="skip_recent_enabled" value="1">
                                                        <label for="skip_recent_enabled" class="form-check-label mb-0">
                                                            Do not add to call queue if call made within
                                                        </label>

                                                        <div class="input-group" style="width: 130px;">
                                                            <input 
                                                                type="number" 
                                                                name="skip_recent_days" 
                                                                id="skip_recent_days" 
                                                                class="form-control donnotcallqueue" 
                                                                min="1" 
                                                                max="7" 
                                                                maxlength="1"
                                                                placeholder="1-7" 
                                                                disabled
                                                                oninput="this.value = this.value.slice(0,1)"
                                                            >
                                                            <span class="input-group-text donnotcallqueuedays">days</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <button type="submit" class="btn btn-primary w-100 schedulecall col-lg-12 col-md-12 col-sm-12 col-md-12">
                                                    <i class="fe fe-phone-call"></i> Schedule Call
                                                </button>
                                                <div id="ajax-loading" style="display:none;">
                                                    <center><span class="outboundloader"></span></center>
                                                </div>
                                            </form>
                                        </div>
                                    </div>

                                    <!-- Right Slide Panel -->
                                    <div id="setupSlidePanel" class="schedule-slide-panel">
                                        <div class="slide-panel-header">
                                            <h4 class="m-0">Setup Preference</h4>
                                            <button type="button" class="close-panel" id="closesetupBtn">&times;</button>
                                        </div>
                                        <div class="slide-panel-content">
                                            <form id="setupForm" method="POST" action="{{ route('businesses.saveMapping') }}">
                                                @csrf
                                                <div class="row">
                                                    {{-- Phone Number --}}
                                                    <div class="outboundform col-lg-6 col-md-12 col-sm-12">
                                                        <div class="form-group">
                                                            <label class="form-label">Phone Number <span class="text-red">*</span></label>
                                                            <select name="pr_phone_number_id" class="form-control select2" required>
                                                                <option value="">Select Phone Number</option>
                                                                @foreach ($numbers as $number)
                                                                    <option value="{{ $number['id'] }}">{{ $number['formatted'] }}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>

                                                    {{-- Assistant or Workflow --}}
                                                    <div class="outboundform col-lg-6 col-md-12 col-sm-12">
                                                        <div class="form-group">
                                                            <label class="form-label">Assistant / Workflow <span class="text-red">*</span></label>
                                                            <select name="pr_assistant_id" id="assistantOrWorkflowSelect" class="form-control select2" required>
                                                                <option value="">Select Assistant/Workflow</option>
                                                                @foreach ($assistants as $assistant)
                                                                    <option value="A_{{ $assistant['id'] }}">{{ $assistant['name'] }}</option>
                                                                @endforeach
                                                                @foreach ($workflows as $workflow)
                                                                    <option value="W_{{ $workflow['id'] }}">{{ $workflow['name'] }}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>

                                                    {{-- DNC Checkbox --}}
                                                    <div class="setupprefcheckbox col-lg-6 col-md-12 col-sm-12">
                                                        <div class="form-group">
                                                            <input type="checkbox" name="check_dnc" id="check_dnc" value="1">
                                                            <label for="check_dnc" class="form-check-label">Check Do Not Call (DNC) before calling</label>
                                                        </div>
                                                    </div>

                                                    {{-- Skip Recent Calls Checkbox + Days Input --}}
                                                    <div class="setupprefcheckbox col-lg-12 col-md-12 col-sm-12 col-md-12">
                                                        <div class="form-group d-flex align-items-center gap-2">
                                                            <input type="checkbox" name="skip_recent_enabled" id="skip_recent_enabled_pref" value="1">
                                                            <label for="skip_recent_enabled_pref" class="form-check-label mb-0 ml-1">
                                                                Do not add to call queue if call made within
                                                            </label>

                                                            <div class="input-group" style="width: 130px;">
                                                                <input 
                                                                    type="number" 
                                                                    name="skip_recent_days" 
                                                                    id="skip_recent_days_pref" 
                                                                    class="form-control donnotcallqueue"
                                                                    min="1" 
                                                                    max="7"
                                                                    maxlength="1"
                                                                    placeholder="1-7" 
                                                                    disabled
                                                                    oninput="this.value = this.value.slice(0,1)"
                                                                >
                                                                <span class="input-group-text donnotcallqueuedays">days</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>



                                                {{-- Dynamic Mapping Table --}}
                                                <div id="modifierMappingContainer" style="display:none;" class="dynamicmapping mt-4"></div>

                                                {{-- Save Button --}}
                                                <div class="schedulecallbtn col-lg-12 col-md-12 col-sm-12 col-md-12 mt-5">
                                                    <div class="form-group">
                                                        <button type="submit" class="schedulecall"><i class="fe fe-phone-call"></i>&nbsp;&nbsp; Save Preference</button>
                                                    </div>
                                                </div>

                                                <div id="ajax-loading" style="display:none;">
                                                    <center><span class="outboundloader"></span></center>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End app-content-->
        </div>
        <!--Footer-->
        @include('layouts.appfooter')
        <!-- End Footer-->
    </div>
    <!-- End Page -->

    <!-- Back to top -->
    <a href="#top" id="back-to-top"><i class="fe fe-chevrons-up"></i></a>
</div>

@include('includes.jslinks_common')
<script>
$(document).ready(function () {
    let table = null;
    let allRows = [];
    const selectedIndexes = {};

    // --- AJAX Search Form Submit ---
    $('#businessSearchForm').on('submit', function (e) {
        e.preventDefault();
        const form = $(this);

        $.ajax({
            url: form.attr('action'),
            method: 'POST',
            data: form.serialize(),
            beforeSend: function () {
                $('#resultsContainer').html('<div class="text-center my-3"><span class="spinner-border text-primary"></span></div>');
                $('#expbutton').css('display','none');
                $('#schedulebtn').css('display','none');
            },
            success: function (response) {
                // Inject HTML
                $('#resultsContainer').html(response.html);
                $('#expbutton').css('display','block');
                $('#schedulebtn').css('display','block');

                // Capture all rows as JSON from backend
                allRows = response.places ?? [];

                // Reinitialize DataTable safely
                if ($.fn.DataTable.isDataTable('#examplenew')) {
                    $('#examplenew').DataTable().destroy();
                }

                table = $('#examplenew').DataTable({
                    pageLength: 10,
                    ordering: true,
                    responsive: true,
                    columnDefs: [
                        {
                            targets: 0,        // index of your checkbox column (0 = first column)
                            orderable: false,  // disable sorting
                            searchable: false  // optional: disable searching too
                        }
                    ]
                });

                attachCheckboxLogic(table);
            },
            error: function (xhr) {
                let msg = xhr.responseJSON?.message || 'Something went wrong.';
                $('#resultsContainer').html('<div class="alert alert-danger busierrosec">' + msg + '</div>');
            }
        });
    });

    // --- Checkbox + Select All logic ---
    function attachCheckboxLogic(table) {
        const selectAll = document.getElementById('selectAll');
        const scheduleCallWrapper = document.getElementById('scheduleCallWrapper');

        $('#examplenew').on('change', '.rowCheckbox', function () {
            const index = this.dataset.index;
            if (this.checked) selectedIndexes[index] = true;
            else delete selectedIndexes[index];
            toggleButton();
        });

        if (selectAll) {
            selectAll.addEventListener('change', function () {
                const isChecked = this.checked;
                table.rows({ search: 'applied' }).every(function () {
                    const node = $(this.node());
                    const checkbox = node.find('.rowCheckbox');
                    const index = checkbox.data('index');
                    checkbox.prop('checked', isChecked);
                    if (isChecked) selectedIndexes[index] = true;
                    else delete selectedIndexes[index];
                });
                toggleButton();
            });
        }

        table.on('draw', function () {
            table.rows({ search: 'applied' }).every(function () {
                const node = $(this.node());
                const checkbox = node.find('.rowCheckbox');
                const index = checkbox.data('index');
                checkbox.prop('checked', !!selectedIndexes[index]);
            });
        });

        function toggleButton() {
            const anySelected = Object.keys(selectedIndexes).length > 0;
            if (scheduleCallWrapper)
                scheduleCallWrapper.style.display = anySelected ? 'block' : 'none';
        }
    }

    // --- Schedule Form Submit (Attach Selected Businesses) ---
    $(document).on('submit', '#selectedBusinessesForm', function (e) {
        const form = this;

        // Remove previous dynamic inputs
        form.querySelectorAll('.dynamic-selected').forEach(el => el.remove());

        Object.keys(selectedIndexes).forEach(index => {
            const row = allRows[index];
            if (!row) return;

            const wrapper = document.createElement('div');
            wrapper.classList.add('dynamic-selected');

            for (const key in row) {
                const input = document.createElement('input');
                input.type = 'hidden';
                input.name = `selected[${index}][${key}]`;
                input.value = row[key] ?? '';
                wrapper.appendChild(input);
            }

            const check = document.createElement('input');
            check.type = 'hidden';
            check.name = `selected[${index}][selected]`;
            check.value = '1';
            wrapper.appendChild(check);

            form.appendChild(wrapper);
        });
    });

    // --- Slide Panel logic ---
    const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
    $('#user_timezone').val(timezone);
    $('#user_timezone_fetch').val(timezone);

    // $(document).on('click', '#schedulebtn', function () {
    //     $("#scheduleSlidePanel").addClass('active');
    // });

    $(document).on('click', '#closePanelBtn', function () {
        $("#scheduleSlidePanel").removeClass('active');
    });

    $(document).on('click', '#setupr', function () {
        $("#setupSlidePanel").addClass('active');
    });

    $(document).on('click', '#closesetupBtn', function () {
        $("#setupSlidePanel").removeClass('active');
    });
    $('#assistantOrWorkflowSelect').on('change', function() {
        const selectedId = $(this).val();
        if (!selectedId) {
            $('#modifierMappingContainer').hide().empty();
            return;
        }

        $('#ajax-loading').show();

        $.ajax({
            url: "{{ route('businesses.fetchModifiers') }}",
            method: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                assistant_or_workflow_id: selectedId
            },
            success: function(res) {
                $('#ajax-loading').hide();
                if (res.html) {
                    $('#modifierMappingContainer').html(res.html).slideDown();
                }
            },
            error: function(xhr) {
                $('#ajax-loading').hide();
                alert('Failed to load modifiers.');
            }
        });
    });
    // --- Save preferences via AJAX ---
    $('#setupForm').on('submit', function (e) {
        e.preventDefault();

        // Check if "Number" modifier is set to "Do Not Match"
        const numberSelect = $('select[name="mapping[Number]"]');
        const selectedValue = numberSelect.val();

        if (!selectedValue || selectedValue === "0") {
            Swal.fire({
                icon: 'error',
                title: 'Required Mapping',
                text: 'Please select a column for the Number modifier.',
            });
            return false; // stop form submission
        }

        const form = $(this);
        $('#ajax-loading').show();

        $.ajax({
            url: form.attr('action'),
            method: 'POST',
            data: form.serialize(),
            success: function (res) {
                $('#ajax-loading').hide();

                
                Swal.fire({
                    icon: 'success',
                    title: 'Success',
                    text: res.message || 'Preferences saved successfully.',
                    timer: 2000,
                    showConfirmButton: false
                });

            $('#setupr').hide();
            $('.btnwrapper').empty();
            const selectedNumberText = form.find('select[name="pr_phone_number_id"] option:selected').text();
            const selectedAssistantText = form.find('select[name="pr_assistant_id"] option:selected').text();
            const selectedNumberId = form.find('select[name="pr_phone_number_id"]').val();
            const selectedAssistantId = form.find('select[name="pr_assistant_id"]').val();

            if ($('#pref_phone_number_id').length === 0) {
                $('body').append(`<input type="hidden" id="pref_phone_number_id" value="${selectedNumberId}">`);
            } else {
                $('#pref_phone_number_id').val(selectedNumberId);
            }

            if ($('#pref_assistant_id').length === 0) {
                $('body').append(`<input type="hidden" id="pref_assistant_id" value="${selectedAssistantId}">`);
            } else {
                $('#pref_assistant_id').val(selectedAssistantId);
            }


            const summaryHtml = `
                <div id="preferenceSummary" class="preferencesummary mt-3" style="display:inline-block;position: relative;">
                    <div>
                        <a class="d-flex mb-1"><span class="material-symbols-outlined">phone_in_talk</span> ${selectedNumberText}</a>
                        <span class="d-flex mb-1 asswfsec"><span class="material-symbols-outlined">supervisor_account</span>  ${selectedAssistantText}</span>
                    </div>
                    <button type="button" class="editprefbtn" id="editPrefBtn">
                        <i class="fe fe-edit"></i>
                    </button>
                    <button type="button" class="delprefbtn" id="delPrefBtn">
                        <i class="fe fe-trash"></i>
                    </button>
                </div>
            `;

          
            $('.btnwrapper').html(summaryHtml).show();
                 
            $("#setupSlidePanel").removeClass('active');
            form.trigger('reset');           
            form.find('select').val('').trigger('change');
            $('#table-wrapper').empty();
            $('#expbutton').css('display','none');
            $('#schedulebtn').css('display','none');

                // Optional: reset the form
                // form.trigger('reset');
                // $('#modifierMappingContainer').slideUp().empty();
            },
            error: function (xhr) {
                $('#ajax-loading').hide();
                let msg = xhr.responseJSON?.message || 'Something went wrong. Please try again.';

                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: msg
                });
            }
        });
    });
    $(document).on('click', '#schedulebtn', function () {
    const prefPhone = $('#pref_phone_number_id').val();
    const prefAssistant = $('#pref_assistant_id').val();

    // If preference is set, directly submit form using stored preference
    if (prefPhone && prefAssistant) {
        const form = $('#selectedBusinessesForm');

        // Inject saved preference into form
        if (form.find('input[name="phone_number_id"]').length === 0) {
            form.append(`<input type="hidden" name="phone_number_id" value="${prefPhone}">`);
        } else {
            form.find('input[name="phone_number_id"]').val(prefPhone);
        }

        if (form.find('input[name="assistant_id"]').length === 0) {
            form.append(`<input type="hidden" name="assistant_id" value="${prefAssistant}">`);
        } else {
            form.find('input[name="assistant_id"]').val(prefAssistant);
        }

        // Optional: show loader
        $('#ajax-loading').show();

        // Submit automatically
        form.trigger('submit');

    } else {
        // If no preference, open setup panel
        $("#scheduleSlidePanel").addClass('active');
    }
});

$(document).on('click', '#editPrefBtn', function () {
    $("#setupSlidePanel").addClass('active');
    const form = $('#setupForm');

    // Reset form before loading
    form.trigger('reset');
    $('#modifierMappingContainer').hide().empty();
    $('#ajax-loading').show();

    $.ajax({
        url: "{{ route('businesses.getPreference') }}", // <-- create this route
        method: "GET",
        success: function (pref) {
            $('#ajax-loading').hide();

            // ---- Fill main fields ----
            if (pref.phone_number_id) {
                form.find('select[name="pr_phone_number_id"]').val(pref.phone_number_id).trigger('change');
            }

            if (pref.assistant_or_workflow_id) {
                form.find('select[name="pr_assistant_id"]').val(pref.assistant_or_workflow_id).trigger('change');
            }

            $('#check_dnc').prop('checked', parseInt(pref.check_dnc) === 1);

            const callWithin = pref?.call_within ?? null;

            if (callWithin && parseInt(callWithin) > 0) {
                $('#skip_recent_enabled_pref').prop('checked', true);
                $('#skip_recent_days_pref').val(callWithin).prop('disabled', false);
            } else {
                $('#skip_recent_enabled_pref').prop('checked', false);
                $('#skip_recent_days_pref').val('').prop('disabled', true);
            }

            // ---- Fetch and fill modifiers ----
            if (pref.assistant_or_workflow_id) {
                $('#ajax-loading').show();
                $.ajax({
                    url: "{{ route('businesses.fetchModifiers') }}",
                    method: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                        assistant_or_workflow_id: pref.assistant_or_workflow_id
                    },
                    success: function (res) {
                        $('#ajax-loading').hide();

                        if (res.html) {
                            $('#modifierMappingContainer').html(res.html).slideDown();

                            // Initialize select2 on dynamically added selects
                            $('#modifierMappingContainer').find('select').each(function () {
                                if (!$(this).hasClass('select2-hidden-accessible')) {
                                    $(this).select2({ dropdownParent: $('#modifierMappingContainer') });
                                }
                            });

                            // Apply saved mapping (from API)
                            if (pref.mapping && typeof pref.mapping === 'object') {
                                function escapeSelector(s) {
                                    return s.replace(/([ #;&,.+*~\':"!^$[\]()=>|/@])/g, '\\$1');
                                }
                                Object.keys(pref.mapping).forEach(function (modKey) {
                                    const value = pref.mapping[modKey];

                                    // Skip null/empty values
                                    if (value === null || value === '') return;

                                     const escapedModKey = escapeSelector(modKey);

                                    // Match case-insensitively
                                    const selector = [
                                        `select[name="mapping[${escapedModKey}]"]`,
                                        `select[name="mapping[${escapeSelector(modKey.toLowerCase())}]"]`,
                                        `select[name="mapping[${escapeSelector(modKey.toUpperCase())}]"]`,
                                        `input[name="mapping[${escapedModKey}]"]`,
                                        `input[name="mapping[${escapeSelector(modKey.toLowerCase())}]"]`,
                                        `input[name="mapping[${escapeSelector(modKey.toUpperCase())}]"]`,
                                        `select[data-modifier="${escapedModKey}"]`,
                                        `select[data-modifier="${escapeSelector(modKey.toLowerCase())}"]`
                                    ].join(',');

                                    const $el = $('#modifierMappingContainer').find(selector).first();
                                    if ($el.length) {
                                        if ($el.is('select')) {
                                            $el.val(value).trigger('change');
                                        } else {
                                            $el.val(value);
                                        }
                                    } else {
                                        console.warn('No matching modifier select for key:', modKey);
                                    }
                                });
                            }
                        }
                    },
                    error: function () {
                        $('#ajax-loading').hide();
                        Swal.fire('Error', 'Failed to load modifiers.', 'error');
                    }
                });
            }
        },
        error: function () {
            $('#ajax-loading').hide();
            Swal.fire('Error', 'Could not fetch saved preference.', 'error');
        }
    });
});

$(document).on('click', '#delPrefBtn', function () {
    Swal.fire({
        title: 'Are you sure?',
        text: 'This will remove your saved preference permanently.',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#6c757d',
        confirmButtonText: 'Yes, delete it'
    }).then((result) => {
        if (result.isConfirmed) {
            $('#ajax-loading').show();

            $.ajax({
                url: "{{ route('businesses.deletePreference') }}",
                method: "DELETE",
                data: { _token: "{{ csrf_token() }}" },
                success: function (res) {
                    $('#ajax-loading').hide();

                    Swal.fire({
                        icon: 'success',
                        title: 'Deleted!',
                        text: res.message || 'Preference deleted successfully.',
                        timer: 2000,
                        showConfirmButton: false
                    });

                    // Reset UI
                    $('#preferenceSummary').remove();
                    $('#editPrefBtn').remove();
                    $('#deletePrefBtn').remove();

                    // Recreate Setup Preference button
                    const setupBtn = `<div class="btnwrapper">
                        <button type="button" class="setupprefbtn w-100" id="setupr">Setup Preference</button>
                    </div>`;

                    $('.btnwrapper').html(setupBtn).show();

                    // Clear hidden inputs
                    $('#pref_phone_number_id').remove();
                    $('#pref_assistant_id').remove();

                    const setupForm = $('#setupForm');
                    setupForm.trigger('reset');
                    setupForm.find('select').val('').trigger('change');
                    setupForm.find('#check_dnc').prop('checked', false);
                    $('#modifierMappingContainer').slideUp().empty();
                },
                error: function (xhr) {
                    $('#ajax-loading').hide();
                    let msg = xhr.responseJSON?.message || 'Failed to delete preference.';
                    Swal.fire('Error', msg, 'error');
                }
            });
        }
    });
});
$(document).on('change', '#skip_recent_enabled', function () {
    if ($(this).is(':checked')) {
        $('#skip_recent_days').prop('disabled', false).attr('required', true);
    } else {
        $('#skip_recent_days').prop('disabled', true).removeAttr('required').val('');
    }
});
$(document).on('change', '#skip_recent_enabled_pref', function () {
    if ($(this).is(':checked')) {
        $('#skip_recent_days_pref').prop('disabled', false).attr('required', true);
    } else {
        $('#skip_recent_days_pref').prop('disabled', true).removeAttr('required').val('');
    }
});
});
</script>
@endsection