@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 id="preferenceSummary" class="alert alert-success mt-3" style="display:inline-block;">
                                                        <strong>☎️ {{ $selectedNumberText }}</strong><br>
                                                        <span>Assistant/Workflow: <strong>{{ $selectedAssistantText }}</strong></span>
                                                    </div>

                                                    @endif
                                                </div>
                                                <div class="card-body cardbody">
                                                    @if(session('error'))
                                                        <div class="alert alert-danger">{{ session('error') }}</div>
                                                    @endif
                                                    <form id="businessSearchForm" method="POST" action="{{ route('businesses.fetch') }}" class="mb-4">
                                                        @csrf
                                                        <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">City </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-panel">
                                        <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>
                                                <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

                                                {{-- Phone Number --}}
                                                <div class="outboundform col-lg-12 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-12 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-12 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>

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

                                                {{-- Save Button --}}
                                                <button type="submit" class="btn btn-primary w-100 schedulecall mt-3">
                                                    <i class="fe fe-phone-call"></i>&nbsp;&nbsp; Save Preference
                                                </button>

                                                <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> Loading...</div>');
                $('#expbutton').css('display','none');
            },
            success: function (response) {
                // Inject HTML
                $('#resultsContainer').html(response.html);
                $('#expbutton').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
                });

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

    // $(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 === "") {
            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="alert alert-success mt-3" style="display:inline-block;">
                    <strong>☎️ ${selectedNumberText}</strong><br>
                    <span>Assistant/Workflow: <strong>${selectedAssistantText}</strong></span>
                </div>
            `;

          
            $('.btnwrapper').html(summaryHtml).show();
                 
            $("#setupSlidePanel").removeClass('active');
            form.trigger('reset');           
            form.find('select').val('').trigger('change');
            $('#table-wrapper').empty();
            $('#expbutton').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');
    }
});

});
</script>
@endsection