@extends('layouts.app')
@section('content')
<div class="app sidebar-mini">
    <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>

                        <div class="card carddivision">
                            <div class="row">
                                <div class="ringimaimenubar col-lg-1">
                                    @include('layouts.sidemenubar')
                                </div>

                                <div class="ringimaimain col-lg-11">
                                    <div class="row">
                                        <div class="cardleft col-lg-12">
                                            <div class="card carddivision">
                                                <div class="card-header mb-4">
                                                    <div class="card-title"> Schedule Call for {{ $asst_work_data['name'] ?? 'Assistant' }} ({{ $phone['formatted'] ?? '' }})</div>
                                                </div>
                                                <div class="card-body cardbody">
                                                    @if(isset($error))
                                                        <div class="alert alert-danger busierrosec">{{ $error }}</div>
                                                    @endif
                                                    <form id="modifierMappingForm" method="POST" action="{{ route('businesses.queue') }}">
                                                        @csrf
                                                        @if($show_mapping)
                                                        <div id="table-wrapper" class="table-responsive commtlb">
                                                            <table class="table table-bordered text-nowrap tablelistingsec schetlb" id="example">
                                                                <thead>
                                                                    <tr>
                                                                        <th>Modifier</th>
                                                                        <th>Match With Column</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    @foreach($modifiers as $modifier)
                                                                    <tr>
                                                                        <td>{{ $modifier }}</td>
                                                                        <td>
                                                                            <div class="outboundform col-lg-6 col-md-12 col-sm-12">
                                                                                <div class="form-group">
                                                                                    <select name="mapping[{{ $modifier }}]" class="form-control select2">
                                                                                        <option value="0">Do Not Match</option>
                                                                                        @foreach($headers as $header)
                                                                                            <option value="{{ $header }}">{{ ucfirst($header) }}</option>
                                                                                        @endforeach
                                                                                    </select>
                                                                                </div>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                    @endforeach
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-right mt-3">
                                                            <button type="button" id="previewBtn" class="prevmappingbtn">Preview Mapping</button>
                                                        </div>
                                                        @else
                                                            <input type="hidden" name="use_saved_mapping" value="1">

                                                            <div id="previewSection" class="mt-4">
                                                                <h5 class="text-white">Preview (Using Saved Preference)</h5>
                                                                <div id="table-wrapper" class="table-responsive commtlb">
                                                                    <table class="table table-bordered text-nowrap tablelistingsec schetlb" id="previewTable">
                                                                        <thead><tr></tr></thead>
                                                                        <tbody></tbody>
                                                                    </table>
                                                                </div>

                                                                <!-- <div class="outboundformcheck col-lg-6 col-md-12 col-sm-12 mb-0 mt-3">
                                                                    <div class="form-group">
                                                                        <label class="form-label btn-checkbox-style">
                                                                            <input type="checkbox" name="prioritize_call" id="prioritize_call" value="on">
                                                                            &nbsp;&nbsp;<span class="checkbox-text">Prioritise Call</span>
                                                                        </label>
                                                                    </div>
                                                                </div> -->
                                                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-right mt-3 prioritisecallchkbox">
                                                                    <input type="checkbox" name="prioritize_call" id="prioritize_call" value="on">
                                                                    &nbsp;&nbsp;<span class="checkbox-text">Prioritise Call</span>
                                                                    <button type="submit" class="btn btn-success">Add to Call Queue</button>
                                                                </div>
                                                            </div>
                                                        @endif
                                                         @if($show_mapping)
                                                        <div id="previewSection" class="mt-4" style="display:none;">
                                                            <h5 class="text-white">Preview Mapped Data</h5>
                                                            <div id="table-wrapper" class="table-responsive commtlb">
                                                                <table class="table table-bordered text-nowrap tablelistingsec schetlb" id="previewTable">
                                                                    <thead><tr></tr></thead>
                                                                    <tbody></tbody>
                                                                </table>
                                                            </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="prioritize_call" id="prioritize_call" value="on">
                                                                        &nbsp;&nbsp;<span class="checkbox-text">Prioritise Call</span>
                                                                    </label>
                                                                </div>
                                                            </div> -->
                                                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-right mt-3 prioritisecallchkbox">
                                                                <input type="checkbox" name="prioritize_call" id="prioritize_call" value="on">
                                                                &nbsp;&nbsp;<span class="checkbox-text">Prioritise Call</span>
                                                                <button type="submit" class="btn btn-success">Add to Call Queue</button>
                                                            </div>
                                                        </div>
                                                        @endif
                                                        <input type="hidden" name="user_timezone" id="user_timezone"/>
                                                        <input type="hidden" name="assistant_id" id="assistant_id" value="{{ $asst_work_data['id']}}"/>
                                                        <input type="hidden" name="phone_number_id" id="phone_number_id" value="{{ $phone['id']}}"/>
                                                        <input type="hidden" name="mode" id="mode" value="{{ $type}}"/>
                                                        <input type="hidden" name="headers_values" id="headers_values" value='@json($headers)' />
                                                        <input type="hidden" name="modifiers" id="modifiers" value='@json($modifiers)' />
                                                        <input type="hidden" name="asst_work_data" id="asst_work_data" value='@json($asst_work_data)' />
                                                        <input type="hidden" name="phone" id="phone" value='@json($phone)' />

                                                        {{-- Hidden Selected Business Data --}}
                                                        @foreach($selectedBusinesses as $i => $b)
                                                            @foreach($b as $key => $val)
                                                                <input type="hidden" name="selected[{{ $i }}][{{ $key }}]" value="{{ $val }}">
                                                            @endforeach
                                                        @endforeach
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div> 
                    </div>
                </div>
            </div>
        </div>
        @include('layouts.appfooter')
    </div>
</div>

@include('includes.jslinks_common')

<script>
// document.addEventListener('DOMContentLoaded', () => {
//     const previewBtn = document.getElementById('previewBtn');
//     const previewSection = document.getElementById('previewSection');
//     const previewTable = document.getElementById('previewTable');
//     const businesses = @json($selectedBusinesses);
//     const showMapping = @json($show_mapping);
//     const prefMapping = @json($pref_mapping);

//     function renderPreview(mappings) {
//         const headerRow = previewTable.querySelector('thead tr');
//         headerRow.innerHTML = '';
//         Object.keys(mappings).forEach(mod => {
//             if (mappings[mod]) headerRow.innerHTML += `<th>${mod}</th>`;
//         });

//         const body = previewTable.querySelector('tbody');
//         body.innerHTML = '';
//         businesses.forEach(row => {
//             let tr = '<tr>';
//             Object.values(mappings).forEach(col => {
//                 if (col) tr += `<td>${row[col] ?? ''}</td>`;
//             });
//             tr += '</tr>';
//             body.innerHTML += tr;
//         });

//         previewSection.style.display = 'block';
//     }

//     if (showMapping) {
//         // manual mapping -> preview button
//         previewBtn.addEventListener('click', () => {
//             const mappings = {};
//             document.querySelectorAll('select[name^="mapping"]').forEach(sel => {
//                 mappings[sel.name.replace('mapping[', '').replace(']', '')] = sel.value;
//             });
//             renderPreview(mappings);
//         });
//     } else {
//         // auto render using saved mapping
//         renderPreview(prefMapping);
//     }

//     const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
//     $('#user_timezone').val(timezone);
// });

document.addEventListener('DOMContentLoaded', () => {
    const previewBtn = document.getElementById('previewBtn');
    const previewSection = document.getElementById('previewSection');
    const previewTable = document.getElementById('previewTable');
    const businesses = @json($selectedBusinesses);
    const showMapping = @json($show_mapping);
    const prefMapping = @json($pref_mapping);
    let dataTable = null;

    function renderPreview(mappings) {
        // Destroy existing DataTable if it exists
        if (dataTable) {
            dataTable.destroy();
            dataTable = null;
        }

        const headerRow = previewTable.querySelector('thead tr');
        headerRow.innerHTML = '';
        Object.keys(mappings).forEach(mod => {
            if (mappings[mod]) headerRow.innerHTML += `<th>${mod}</th>`;
        });

        const body = previewTable.querySelector('tbody');
        body.innerHTML = '';
        businesses.forEach(row => {
            let tr = '<tr>';
            Object.values(mappings).forEach(col => {
                if (col) tr += `<td>${row[col] ?? ''}</td>`;
            });
            tr += '</tr>';
            body.innerHTML += tr;
        });

        previewSection.style.display = 'block';

        // Initialize DataTable after table is populated
        dataTable = $('#previewTable').DataTable({
            pageLength: 10,
            ordering: true,
            responsive: true
        });
    }

    if (showMapping) {
        previewBtn.addEventListener('click', () => {
            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; // stop execution if validation fails
            }
            
            const mappings = {};
            document.querySelectorAll('select[name^="mapping"]').forEach(sel => {
                mappings[sel.name.replace('mapping[', '').replace(']', '')] = sel.value === '0' ? '' : sel.value;
            });
            renderPreview(mappings);
        });
    } else {
        renderPreview(prefMapping);
    }

    const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
    $('#user_timezone').val(timezone);
});


</script>
@endsection