@extends('layouts.app')
@section('content')
<div class="app sidebar-mini">
    <!-- Page -->
    <div class="page">
        <div class="page-main">
            <div class="app-content main-content">
                <div class="side-app">
                    @include('layouts.appheader')
                    <div class="containersection">
                        <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 -->
                                @if ($errors->any())
                                    <div class="emperrmsg">
                                        <ul class="mb-0">
                                            @foreach ($errors->all() as $error)
                                                <li>{{ $error }}</li>
                                            @endforeach
                                            <i class="fe fe-x" id="emperrmsgclose"></i>
                                        </ul>
                                    </div>
                                @endif
                                <div class="ringimaimain col-lg-11 col-md-11 col-sm-11 col-xs-11">
                                    <form id="makeCallForm" enctype="multipart/form-data" autocomplete="off">
                                        @csrf
                                        <div class="row">
                                            <div class="outcardleft 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">Outbound Call</div>
                                                    </div>
                                                    <div class="card-body cardbody">
                                                        <input type="hidden" name="user_timezone" id="user_timezone"/>
                                                        <div class="row">
                                                            <div class="outboundformradiocheck col-lg-3 col-md-6 col-sm-12 col-md-12">
                                                                <div class="form-group">
                                                                    <label class="form-label">Call Mode <span class="text-red">*</span></label>
                                                                    <div class="form-check form-check-inline">
                                                                        <input class="form-check-input call-mode-radio" type="radio" name="call_mode" id="call_one" value="one" {{ old('call_mode') === 'one' ? 'checked' : '' }} required>
                                                                        <label class="form-check-label callmodelabel" for="call_one">Call One Number</label>
                                                                    </div>
                                                                    <div class="form-check form-check-inline">
                                                                        <input class="form-check-input call-mode-radio" type="radio" name="call_mode" id="call_many" value="many" {{ old('call_mode') === 'many' ? 'checked' : '' }} required>
                                                                        <label class="form-check-label callmodelabel" for="call_many">Batch Calling</label>
                                                                    </div>
                                                                </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">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" required>
                                                                        <option value="">Select Assistant/Workflow</option>
                                                                        @foreach ($assistants as $assistant)
                                                                            <option value="A_{{ $assistant['id'] }}" {{ old('assistant_id') == 'A_'.$assistant['id'] ? 'selected' : '' }}>{{ $assistant['name'] }} - <span class="material-symbols-outlined">supervisor_account</span></option>
                                                                        @endforeach
                                                                        @foreach ($workflows as $workflow)
                                                                            <option value="W_{{ $workflow['id'] }}" {{ old('assistant_id') == 'W_'.$workflow['id'] ? 'selected' : '' }}>{{ $workflow['name'] }} - <span class="material-symbols-outlined">Automation</span></option>
                                                                        @endforeach
                                                                    </select> -->
                                                                    <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 class="outboundform col-lg-3 col-md-6 col-sm-12 col-md-12" id="call-one-fields" style="display: none;">
                                                                <div class="form-group">
                                                                    <label class="form-label">Outbound Phone Number <span class="text-red">*</span></label>
                                                                    <input type="text" name="outbound_number" class="form-control" placeholder="+61XXXXXXXXX" value="{{ old('outbound_number') }}">
                                                                </div>                              
                                                            </div> 
                                                            <div class="outboundform col-lg-3 col-md-12 col-sm-12 mb-0 schedule" style="display:none;" id="scheduleDiv">
                                                                <div class="form-group">
                                                                    <label class="form-label">Scheduling start at <span class="text-red">*</span></label>
                                                                    <div class="input-group">
                                                                        <input type="text" name="earliestAt" id="earliestAt" class="form-control" placeholder="Select Date & Time">
                                                                        <div class="input-group-prepend datepickerprepend">
                                                                            <span class="input-group-text">
                                                                                <i class="fe fe-calendar"></i>
                                                                            </span>
                                                                        </div>
                                                                        <span class="text-danger d-block mt-1" id="schedule-error" style="display: none;width: 100%;"></span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <!-- <div class="outboundform col-lg-3 col-md-6 col-sm-12 col-md-12" id="call-many-fields" style="display: none;">
                                                                <div class="form-group">
                                                                    <label class="form-label mb-2">Upload CSV File <span class="text-red">*</span></label>
                                                                    <div class="d-flex align-items-center gap-3">
                                                                        <label class="custom-file-upload mb-0">
                                                                            Browse File
                                                                            <input type="file" name="csv_file" accept="text/csv,.csv" class="form-control" onchange="updateFileName(this)">
                                                                        </label>
                                                                        <span class="file-name" id="file-name-display">No file chosen</span>
                                                                    </div>
                                                                    <small class="text-muted">Maximum file size : 5 MB</small></br>
                                                                    <small class="text-muted">CSV requires a number column (the numbers to call), an optional name column and any other column from assistantOverrides</small>
                                                                    </br>
                                                                    <a href="#" id="download-dynamic-sample" class="btn btn-sm btn-outline-primary" style="display:none;">
                                                                        <i class="fe fe-download"></i> Download Sample CSV
                                                                    </a>
                                                                    @error('csv_file')
                                                                        <span class="text-danger d-block mt-1" id="csv-file-error">{{ $message }}</span>
                                                                    @else
                                                                        <span class="text-danger d-block mt-1" id="csv-file-error" style="display: none;"></span>
                                                                    @enderror
                                                                </div>
                                                            </div>-->
                                                        </div>
                                                        <div class="row">
                                                            <div class="outboundform col-lg-12 col-md-12 mt-3 mb-5" id="assistant-modifiers-section" style="display:none;">
                                                                <label class="form-label">Modifiers</label>
                                                                <div id="assistant-modifiers-container" class="row"></div>
                                                            </div> 
                                                        </div>
                                                        <div class="row">
                                                            <div class="outboundform outboundformupd col-lg-6 col-md-12 col-sm-12" id="call-many-fields" style="display: none;">
                                                                <div class="form-group">
                                                                    <label class="form-label mb-2">Upload CSV File <span class="text-red">*</span></label>
                                                                    <label class="upload-box" for="csvFileInput">
                                                                    <div class="icon"><span class="material-symbols-outlined">cloud_upload</span></div>
                                                                    <div>select your file or drag and drop</div>
                                                                    <!-- <div class="file-types">csv only accepted</div> -->
                                                                    <div class="browse-button">browse</div>
                                                                    <center><span class="file-name d-block mt-2" id="file-name-display">No file chosen</span></center>
                                                                    <input type="file" name="csv_file" accept=".csv,text/csv" id="csvFileInput" onchange="updateFileName(this)">
                                                                    </label>
                                                                    <small class="maxname text-muted d-block mt-2">Maximum file size: 5 MB</small>
                                                                    <small class="csvname text-muted d-block">CSV requires a number column (numbers to call), an optional name column, and other assistantOverrides columns.</small>
                                                                    <a href="#" id="download-dynamic-sample" class="dwncsv mt-2" style="display:none;">
                                                                        <i class="fe fe-download"></i>&nbsp; Download Sample CSV
                                                                    </a>
                                                                    @error('csv_file')
                                                                    <span class="text-danger d-block mt-1" id="csv-file-error">{{ $message }}</span>
                                                                    @else
                                                                    <span class="text-danger d-block mt-1" id="csv-file-error" style="display: none;"></span>
                                                                    @enderror
                                                                </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;Make a Call</button>
                                                                </div>
                                                            </div>
                                                            <div class="outboundformcheck col-lg-6 col-md-12 col-sm-12 mb-0">
                                                                <div class="form-group">
                                                                    <label class="form-label btn-checkbox-style">
                                                                        <input type="checkbox" name="schedule_call" id="scheduleCheckbox" onchange="toggleSchedule()">
                                                                        &nbsp;&nbsp;<span class="checkbox-text">Schedule Call</span>
                                                                    </label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div id="ajax-loading" style="display:none;">
                                                            <!-- <i class="fe fe-loader fa-spin"></i> Processing... -->
                                                            <center><span class="outboundloader"></span></center>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <!-- <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">Outbound Call</div>
                                                </div>
                                                <div class="card-body cardbody">
                                                    @if ($errors->any())
                                                        <div class="emperrmsg">
                                                            <ul class="mb-0">
                                                                @foreach ($errors->all() as $error)
                                                                    <li>{{ $error }}</li>
                                                                @endforeach
                                                                <i class="fe fe-x" id="emperrmsgclose"></i>
                                                            </ul>
                                                        </div>
                                                    @endif
                                                    <form id="makeCallForm" enctype="multipart/form-data">
                                                        @csrf
                                                        <input type="hidden" name="user_timezone" id="user_timezone"/>
                                                        <div class="row">
                                                            <div class="outboundformradiocheck col-lg-3 col-md-6 col-sm-12 col-md-12">
                                                                <div class="form-group">
                                                                    <label class="form-label">Call Mode <span class="text-red">*</span></label>
                                                                    <div class="form-check form-check-inline">
                                                                        <input class="form-check-input call-mode-radio" type="radio" name="call_mode" id="call_one" value="one" {{ old('call_mode') === 'one' ? 'checked' : '' }} required>
                                                                        <label class="form-check-label callmodelabel" for="call_one">Call One Number</label>
                                                                    </div>
                                                                    <div class="form-check form-check-inline">
                                                                        <input class="form-check-input call-mode-radio" type="radio" name="call_mode" id="call_many" value="many" {{ old('call_mode') === 'many' ? 'checked' : '' }} required>
                                                                        <label class="form-check-label callmodelabel" for="call_many">Batch Calling</label>
                                                                    </div>
                                                                </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">Phone Number</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'] }}" {{ 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">🧑 Assistant / 🔄 Workflow</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'] }}" {{ old('assistant_id') == 'A_'.$assistant['id'] ? 'selected' : '' }}>{{ $assistant['name'] }} - 🧑</option>
                                                                        @endforeach
                                                                        @foreach ($workflows as $workflow)
                                                                            <option value="W_{{ $workflow['id'] }}" {{ old('assistant_id') == 'W_'.$workflow['id'] ? 'selected' : '' }}>{{ $workflow['name'] }} - 🔄</option>
                                                                        @endforeach
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="outboundform col-lg-3 col-md-6 col-sm-12 col-md-12" id="call-one-fields" style="display: none;">
                                                                <div class="form-group">
                                                                    <label class="form-label">Outbound Phone Number</label>
                                                                    <input type="text" name="outbound_number" class="form-control" placeholder="+61XXXXXXXXX" value="{{ old('outbound_number') }}">
                                                                </div>                              
                                                            </div>  
                                                            <div class="outboundform col-lg-12 col-md-12 mt-3" id="assistant-modifiers-section" style="display:none;">
                                                                <label class="form-label">Dynamic Variables</label>
                                                                <div id="assistant-modifiers-container" class="row"></div>
                                                            </div>                            
                                                            <div class="outboundform col-lg-3 col-md-6 col-sm-12 col-md-12" id="call-many-fields" style="display: none;">
                                                                <div class="form-group">
                                                                    <label class="form-label mb-2">Upload CSV File </label>
                                                                    <div class="d-flex align-items-center gap-3">
                                                                        <label class="custom-file-upload mb-0">
                                                                            Browse File
                                                                            <input type="file" name="csv_file" accept="text/csv,.csv" class="form-control" onchange="updateFileName(this)">
                                                                        </label>
                                                                        <span class="file-name" id="file-name-display">No file chosen</span>
                                                                    </div>
                                                                    <small class="text-muted">Maximum file size : 5 MB</small></br>
                                                                    <small class="text-muted">CSV requires a number column (the numbers to call), an optional name column and any other column from assistantOverrides</small>
                                                                    <a href="#" id="download-dynamic-sample" class="btn btn-sm btn-outline-primary" style="display:none;">
                                                                        <i class="fe fe-download"></i> Download Sample CSV
                                                                    </a>
                                                                    @error('csv_file')
                                                                        <span class="text-danger d-block mt-1" id="csv-file-error">{{ $message }}</span>
                                                                    @else
                                                                        <span class="text-danger d-block mt-1" id="csv-file-error" style="display: none;"></span>
                                                                    @enderror
                                                                </div>
                                                            </div> 
                                                        </div>
                                                        <div class="row">
                                                            <div class="outboundform col-lg-3 col-md-6 col-sm-12 mb-0 schedule" style="display:none;" id="scheduleDiv">
                                                                <div class="form-group mb-0">
                                                                    <label class="form-label">Scheduling start at</label>
                                                                    <div class="input-group">
                                                                        <input type="text" name="earliestAt" id="earliestAt" class="form-control" placeholder="Select Date & Time">
                                                                        <div class="input-group-prepend">
                                                                            <span class="input-group-text">
                                                                                <i class="fe fe-calendar"></i>
                                                                            </span>
                                                                        </div>
                                                                        <span class="text-danger d-block mt-1" id="schedule-error" style="display: none;"></span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="outboundformcheck col-lg-3 col-md-6 col-sm-12 mb-0">
                                                                <div class="form-group mb-0">
                                                                    <label class="form-label">
                                                                        <input type="checkbox" name="schedule_call" id="scheduleCheckbox" onchange="toggleSchedule()"> Schedule Call
                                                                    </label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="outboundformbtn col-lg-12 col-md-12 col-sm-12 col-md-12" style="margin-top: 20px;">
                                                                <div class="form-group">
                                                                    <button type="submit" class="savebtn"><i class="fe fe-phone-call"></i>&nbsp;&nbsp;Make a Call</button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div id="ajax-loading" style="display:none;">
                                                            <i class="fe fe-loader fa-spin"></i> Processing...
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>    -->
                                <!-- Main View End -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--Footer-->
        @include('layouts.appfooter')
        <!-- End Footer-->
        <a href="#top" id="back-to-top"><i class="fe fe-chevrons-up"></i></a>
    </div>
</div>
 
@include('includes.jslinks_common')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
    function updateFileName(input) {
        const fileName = input.files[0]?.name || 'No file chosen';
        document.getElementById('file-name-display').textContent = fileName;
    }
</script>
<script>
    $('#emperrmsgclose').click(function () {
        $('.emperrmsg').css('display', 'none');
    });
   
    $('.call-mode-radio').on('change', function () {
        const mode = $(this).val();
        if (mode === 'one') {
            $('#download-dynamic-sample').hide();
            $('#call-one-fields').show();
            $('#call-many-fields').hide();
            $('select[name="phone_number_id"]').val('').trigger('change');
            $('select[name="assistant_id"]').val('').trigger('change');
 
            // Set required for single call mode
            $('input[name="outbound_number"]').attr('required', true);
            $('input[name="csv_file"]').removeAttr('required');
        } else {
            $('#download-dynamic-sample').hide();
            $('#call-one-fields').hide();
            $('#call-many-fields').show();
            $('select[name="phone_number_id"]').val('').trigger('change');
            $('select[name="assistant_id"]').val('').trigger('change');
 
             // Set required for bulk mode
            //$('input[name="csv_file"]').attr('required', true);
            $('input[name="outbound_number"]').removeAttr('required');
        }
    });
    $('.call-mode-radio:checked').trigger('change');
    //  $('form').on('submit', function (e) {
    //     const callMode = $('input[name="call_mode"]:checked').val();
    //     $('#csv-file-error').text('').hide();
    //     if (callMode === 'many') {
    //         const fileInput = $('input[name="csv_file"]')[0];
    //         if (!fileInput.files.length) {
    //             e.preventDefault();
    //             $('#csv-file-error').text('Please upload a CSV file before submitting.').show();
    //             return false;
    //         }
 
    //         const file = fileInput.files[0];
    //         const maxSize = 5 * 1024 * 1024; // 5 MB
 
    //         if (file.size > maxSize) {
    //             e.preventDefault();
    //             $('#csv-file-error').text('CSV file exceeds 5 MB limit.').show();
    //             return false;
    //         }
 
    //         const validTypes = ['text/csv', 'application/vnd.ms-excel'];
    //         if (!validTypes.includes(file.type) && !file.name.endsWith('.csv')) {
    //             e.preventDefault();
    //             $('#csv-file-error').text('Please upload a valid CSV file.').show();
    //             return false;
    //         }
    //     }
    // });
    $('select[name="assistant_id"]').on('change', function () {
    const assistantId = $(this).val();
    const callMode = $('input[name="call_mode"]:checked').val();
 
    if (!assistantId) {
        $('#assistant-modifiers-section').hide();
        $('#download-dynamic-sample').hide(); // hide explicitly if no assistant
        return; // prevent broken href=""
    }
 
 
    if (callMode === 'one' && assistantId) {
        $('#download-dynamic-sample').hide();
        $.ajax({
            url: "{{ route('get.assistant.modifiers', ':id') }}".replace(':id', assistantId),
            method: 'GET',
            success: function (modifiers) {
                const container = $('#assistant-modifiers-container');
                container.empty();
 
                if (modifiers.length > 0) {
                    $('#assistant-modifiers-section').show();
                    modifiers.forEach(function (modifier) {
                        // const label = modifier.replace(/_/g, ' ').replace(/\w\S*/g, function (txt) {
                        //                     return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
                        //                 });
                        // const field = `
                        //     <div class="dynamicformfields col-lg-3 col-md-6 col-sm-12 col-xs-12 mb-4">
                        //         <input type="text" name="modifiers[${modifier}]" class="form-control" placeholder='Enter ${label}' autocomplete="off">
                        //     </div>
                        // `;
                        const safeKey = btoa(modifier); // Base64 encode

                        const label = modifier.replace(/_/g, ' ').replace(/\w\S*/g, function (txt) {
                                            return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
                                        });
                        const field = `
                            <div class="dynamicformfields col-lg-3 col-md-6 col-sm-12 col-xs-12 mb-4">
                                <input type="text" name="modifiers[${safeKey}]" class="form-control" placeholder='Enter ${label}' autocomplete="off">
                            </div>
                        `;
                        container.append(field);
                    });
                } else {
                    $('#assistant-modifiers-section').hide();
                }
            }
        });
    } else {
        $('#assistant-modifiers-section').hide();
        $('#download-dynamic-sample')
            .attr('href', `/generate-sample-csv/${assistantId}`)
            .show();
    }
});
$('#makeCallForm').on('submit', function (e) {
    e.preventDefault();
 
    const form = $(this)[0];
    const formData = new FormData(form);
    const callMode = $('input[name="call_mode"]:checked').val();
 
    $('#csv-file-error').text('').hide();
    if (callMode === 'many') {
        const fileInput = $('input[name="csv_file"]')[0];
 
        // Prevent form if no file selected
        if (!fileInput || !fileInput.files.length) {
            e.preventDefault();
            $('#csv-file-error').text('Please upload a CSV file before submitting.').show();
            return false;
        }
 
        const file = fileInput.files[0];
        const maxSize = 5 * 1024 * 1024; // 5 MB
        const validTypes = ['text/csv', 'application/vnd.ms-excel'];
 
        console.log('File size:', file.size, 'Max:', maxSize); // for debugging
 
        if (file.size > maxSize) {
            e.preventDefault(); // must be here before returning
            $('#csv-file-error').text('CSV file exceeds 5 MB limit.').show();
            return false;
        }
 
        if (!validTypes.includes(file.type) && !file.name.endsWith('.csv')) {
            e.preventDefault(); // must be here before returning
            $('#csv-file-error').text('Please upload a valid CSV file.').show();
            return false;
        }
 
        $('#csv-file-error').hide(); // All good, clear any errors
        // Proceed to AJAX or allow form to submit if needed
    }
    $('#schedule-error').text('').hide();
    if ($('#scheduleCheckbox').is(':checked')) {
        const earliestAt = $('#earliestAt').val().trim();

        if (!earliestAt) {
            $('#schedule-error').text('Please select a date & time for scheduling the call.').show();
            return false;
        }
    }
 
    $('#ajax-loading').show();
    $('.savebtn').prop('disabled', true);
 
    $.ajax({
        url: "{{ route('user.make_call') }}",
        type: "POST",
        data: formData,
        contentType: false,
        processData: false,
        success: function (response) {
            $('#ajax-loading').hide();
            $('.savebtn').prop('disabled', false);
 
            Swal.fire({
                icon: 'success',
                title: 'Success',
                text: response.message || 'Call processed successfully.',
            }).then(() => {
                //window.location.reload(); // or redirect if needed
 
                // Reset the form by ID or class
                $('#makeCallForm')[0].reset(); // assuming your form has id="make-call-form"
 
                $('#call-one-fields').hide();
                $('#call-many-fields').hide();
 
                $('select[name="phone_number_id"]').val('').trigger('change');
                $('select[name="assistant_id"]').val('').trigger('change');
 
                $('#assistant-modifiers-section').hide();
 
                $('#download-dynamic-sample').hide();
 
                // Optionally reset file input manually if needed
                $('input[name="csv_file"]').val(null);
                document.getElementById('file-name-display').textContent = 'No file chosen';
 
                $('input[name="outbound_number"]').removeAttr('required');
                $('input[name="csv_file"]').removeAttr('required');
 
                // Also hide any previous error messages if needed
                $('#csv-file-error').hide();
                const earliestAtInput = document.getElementById('earliestAt');
                earliestAtInput.value = ''; // Optional: clear value when hiding

                if (earliestAtInput._flatpickr && earliestAtInput._flatpickr.altInput) {
                    earliestAtInput._flatpickr.altInput.value = '';
                }
                $('.schedule').hide();
            });
        },
        error: function (xhr) {
            $('#ajax-loading').hide();
            $('.savebtn').prop('disabled', false);
 
            if (xhr.status === 422) {
                const message = xhr.responseJSON.message;
                if(xhr.responseJSON.errors)
                {
                    const errors = xhr.responseJSON.errors;
                    console.log(errors); // This will show the actual structure in the browser console
 
                    let msg = '';
                    Object.keys(errors).forEach(key => {
                        msg += errors[key].join('<br>') + '<br>';
                    });
 
                    Swal.fire({
                        icon: 'error',
                        title: 'Validation Error',
                        html: msg,
                    });
                }
                else
                {
                Swal.fire({
                    icon: 'error',
                    title: 'Validation Error',
                    html: message,
                });
                }
            } else {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: xhr.responseJSON?.message || 'Something went wrong.',
                });
            }
        }
    });
});
function toggleSchedule() {
    const checkbox = document.getElementById('scheduleCheckbox');
    const scheduleDiv = document.getElementById('scheduleDiv');
    const earliestAtInput = document.getElementById('earliestAt');

    if (checkbox.checked) {
        scheduleDiv.style.display = 'block';
    } else {
        scheduleDiv.style.display = 'none';
        earliestAtInput.value = ''; // Optional: clear value when hiding

        if (earliestAtInput._flatpickr && earliestAtInput._flatpickr.altInput) {
            earliestAtInput._flatpickr.altInput.value = '';
        }
    }
}
flatpickr("#earliestAt", {
    enableTime: true,
    altInput: true,
    altFormat: "Y-m-d H:i:S",       // What the user sees (e.g., 2025-07-23 12:15:00)
    dateFormat: "Y-m-d\\TH:i:S",    // What gets submitted (e.g., 2025-07-23T12:15:00)
    time_24hr: true,
    minDate: "today",
    disableMobile: true
});
const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
$('#user_timezone').val(timezone)
$(document).ready(function() {
    $('.datepickerprepend').click(function() {
        var inputId = $(this).siblings('input').attr('id');
        $('#'+ inputId)[0]._flatpickr.open();
        
    });
});
// Select 2 script
$(document).ready(function () {
    function toggleFocusClass($select) {
        const selectedVal = $select.val();
        const $selection = $select.next('.select2-container').find('.select2-selection');
        if (selectedVal) {
            $selection.addClass('selectfocus');
        } else {
            $selection.removeClass('selectfocus');
        }
    }
    $('.select2').on('change', function () {
        toggleFocusClass($(this));
    });
    toggleFocusClass($('.select2'));
});
</script>
<script>
    function updateFileName(input) {
    const fileName = input.files.length ? input.files[0].name : 'No file chosen';
    document.getElementById('file-name-display').textContent = fileName;
    }
</script>
<!-- Select 2 Option icon script -->
<script>
    $(document).ready(function () {
        $('.select2a').select2({
            templateResult: formatOption,
            templateSelection: formatOption,
            placeholder: "Please Select",
            minimumResultsForSearch: '',
            width: '100%',
            allowClear: true
        });

        function formatOption(option) {
            if (!option.id) return option.text;

            const type = $(option.element).data('type');
            let icon = '';
            if (type === 'assistant') icon = 'supervisor_account';
            if (type === 'workflow') icon = 'auto_mode'; // "Automation" is not a valid material symbol, "auto_mode" is

            return $('<span class="material-symbols-outlined" style="vertical-align:middle;font-size: 18px;color: #6fd097;">' + icon + '</span>&nbsp;&nbsp;<span>' + option.text + '</span>');
        }
    });
</script>
<!-- Upload box style script -->
<script>
    function updateFileName(input) {
        const fileName = input.files.length > 0 ? input.files[0].name : 'No file chosen';
        document.getElementById('file-name-display').textContent = fileName;

        const uploadBox = input.closest('.upload-box');
        if (input.files.length > 0) {
            uploadBox.classList.add('has-file');
        } else {
            uploadBox.classList.remove('has-file');
        }
    }

    const inputs = document.getElementsByName("outbound_number");
    const input = inputs[0]; // Get the first element

    if (input) {
        input.addEventListener("input", function () {
        this.value = this.value.replace(/[^0-9+]/g, '');
        });
    }
</script>
<script>
    $(document).ready(function() {
        let observer;
        
        $(document).on('select2:open', function() {
            // Remove initial highlight
            setTimeout(() => {
                $('.select2-results__option').removeClass('select2-results__option--highlighted');
            }, 10);
            
            // Start observing for class changes
            const resultsContainer = document.querySelector('.select2-results');
            if (resultsContainer && !observer) {
                observer = new MutationObserver(function(mutations) {
                    mutations.forEach(function(mutation) {
                        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
                            const target = mutation.target;
                            if (target.classList.contains('select2-results__option--highlighted') && 
                                !target.matches(':hover')) {
                                target.classList.remove('select2-results__option--highlighted');
                            }
                        }
                    });
                });
                
                observer.observe(resultsContainer, {
                    attributes: true,
                    attributeFilter: ['class'],
                    subtree: true
                });
            }
        });
        
        $(document).on('select2:close', function() {
            if (observer) {
                observer.disconnect();
                observer = null;
            }
        });
        
        $(document).on('mouseenter', '.select2-results__option', function() {
            $('.select2-results__option').removeClass('select2-results__option--highlighted');
            $(this).addClass('select2-results__option--highlighted');
        });
        
        $(document).on('mouseleave', '.select2-results__option', function() {
            $(this).removeClass('select2-results__option--highlighted');
        });
    });
</script>
@endsection