@extends('layouts.app')
@section('title', __('gbs::lang.add_new_visit'))

@section('content')
<section class="content-header">
    <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black">@lang('gbs::lang.add_new_visit')</h1>
</section>

<section class="content">
    {!! Form::open([
        'url' => action([\Modules\Gbs\Http\Controllers\RouteController::class, 'store']),
        'method' => 'post',
        'id' => 'add_daily_visites',
        'files' => true,
    ]) !!}
    @component('components.widget', ['class' => 'box-primary'])
        <div class="row">

            <div class="col-sm-4">
                <div class="form-group">
                    {!! Form::label('name', __('gbs::lang.route_name') . ':*') !!}
                    {!! Form::text('name', old('name'), ['class' => 'form-control', 'required', 'placeholder' => __('gbs::lang.route_name')]) !!}
                </div>
                <div class="form-group">
                    {!! Form::label('user_id', __('gbs::lang.users') . ':*') !!}
                    {!! Form::select('user_id', $users, old('user_id'), ['class' => 'form-control select2', 'required']) !!}
                </div>

                <div class="form-group">
                    <label for="excel_import">@lang('gbs::lang.import_from_excel')</label>
                    <input type="file" id="excel_import" accept=".xlsx, .xls" class="form-control" />
                </div>
            </div>

            @php
                $days = [
                    'sunday' => __('gbs::lang.sunday'),
                    'monday' => __('gbs::lang.monday'),
                    'tuesday' => __('gbs::lang.tuesday'),
                    'wednesday' => __('gbs::lang.wednesday'),
                    'thursday' => __('gbs::lang.thursday'),
                    'friday' => __('gbs::lang.friday'),
                    'saturday' => __('gbs::lang.saturday'),
                ];
                $intervals = [
                    7 => __('gbs::lang.every_week'),
                    14 => __('gbs::lang.every_2_weeks'),
                    21 => __('gbs::lang.every_3_weeks'),
                    28 => __('gbs::lang.every_4_weeks'),
                ];
                $contactsDay = __('gbs::lang.contacts_for');
            @endphp

            <div class="col-sm-8">
                @foreach($days as $key => $day)
                    <div class="day-container">
                        <h4>{{ $day }}</h4>
                        @php $counter = 0; @endphp
                        <div class="interval-row">
                            @foreach($intervals as $interval => $label)
                                <div class="form-group" style="flex:1;">
                                    <label for="contacts_{{ $key }}_{{ $interval }}">
                                        {{ $contactsDay }} {{ $day }} - {{ $label }}
                                    </label>
                                    {!! Form::select("contacts[$key][$interval][]", [], old("contacts.$key.$interval", []), [
                                        'class' => 'form-control select2-ajax',
                                        'multiple',
                                        'data-placeholder' => 'اختر العملاء...',
                                        'id' => "contacts_{$key}_{$interval}"
                                    ]) !!}
                                </div>
                                @php
                                    $counter++;
                                    if($counter % 2 == 0){
                                        echo '</div><div class="interval-row">';
                                    }
                                @endphp
                            @endforeach
                        </div>
                    </div>
                @endforeach
            </div>

        </div>
    @endcomponent

    <button type="submit" class="tw-dw-btn tw-dw-btn-primary tw-dw-btn-lg tw-text-white">@lang('messages.save')</button>
    {!! Form::close() !!}
</section>
@endsection

@section('javascript')
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>

<script>
$(function() {

    // ---- تهيئة Select2 AJAX ----
    $('.select2-ajax').select2({
        placeholder: 'اختر العملاء...',
        minimumInputLength: 1,
        ajax: {
            url: '{{ route("gbs.clients.search") }}',
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return { q: params.term };
            },
            processResults: function (data) {
                return {
                    results: $.map(data, function (item) {
                        return { text: item.name, id: item.id };
                    })
                };
            },
            cache: true
        }
    });

    // دالة لجلب عميل بالاسم/الكود (تُستخدم مع Excel import)
    function fetchClientByCode(code, callback) {
        $.ajax({
            url: '{{ route("gbs.clients.search") }}',
            data: { q: code },
            dataType: 'json',
            success: function (data) {
                if (data.length > 0) {
                    const client = data[0];
                    callback({ id: client.id, text: client.name });
                }
            }
        });
    }

    // ---- استيراد Excel ----
    $('#excel_import').on('change', function (e) {
        const file = e.target.files[0];
        if (!file) return;

        const reader = new FileReader();
        reader.onload = function (e) {
            const data = new Uint8Array(e.target.result);
            const workbook = XLSX.read(data, { type: 'array' });
            const sheetName = workbook.SheetNames[0];
            const sheet = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName], { header: 1 });

            const headerRow = sheet[0].map(h => h.toString().toLowerCase().trim());
            headerRow.forEach(colHeader => { $(`#contacts_${colHeader}`).empty(); });

            for (let i = 1; i < sheet.length; i++) {
                const row = sheet[i];
                row.forEach((cellValue, colIndex) => {
                    if (!cellValue) return;
                    const colHeader = headerRow[colIndex];
                    const selectId = `contacts_${colHeader}`;
                    if (selectId) {
                        fetchClientByCode(cellValue.toString().trim(), function(clientData) {
                            const option = new Option(clientData.text, clientData.id, true, true);
                            $(`#${selectId}`).append(option).trigger('change');
                        });
                    }
                });
            }
        };
        reader.readAsArrayBuffer(file);
    });


    // ---- اعتراض ارسال الفورم وطلب تأكيد من الباك قبل الإرسال النهائي ----
    $('#add_daily_visites').on('submit', function(e) {
        // إذا سبق وأَدْرجنا override_active، دع الإرسال يتم طبيعيًا (لتجنب loop)
        if ($(this).find('input[name="override_active"]').length) {
            return true; // يسمح بالإرسال
        }

        e.preventDefault();
        var form = this;
        var userId = $('select[name="user_id"]').val();

        // لو لم يُحدد المندوب، أرسل الفورم (دع Laravel يتعامل مع الفاليديشن)
        if (!userId) {
            form.submit();
            return;
        }

        // استعلام إلى الباك للتأكد هل هناك روت نشط لهذا المندوب
        $.ajax({
            url: '{{ route("gbs.routes.checkActive") }}',
            method: 'GET',
            data: { user_id: userId },
            dataType: 'json',
            success: function(res) {
                if (res && res.active) {
                    // أعرض confirm في الواجهة — إذا موافق نضيف override_active ونرسل الفورم
                    if (confirm(res.msg || 'يوجد روت نشط لهذا المندوب. تود المتابعة وإلغاء القديم؟')) {
                        // أضف الحقل override_active ثم أرسل الفورم (DOM submit لتجاوز handler)
                        $('<input>').attr({type: 'hidden', name: 'override_active', value: 1}).appendTo('#add_daily_visites');
                        form.submit(); // الآن سيجري الإرسال لأن الحقل موجود
                    } else {
                        // المستخدم ألغى - لا نفعل شيئًا (يبقى على الصفحة)
                    }
                } else {
                    // لا يوجد روت نشط — نتابع الإرسال مباشرة
                    form.submit();
                }
            },
            error: function() {
                // فشل التحقق من الباك — نعرض تحذير ونسأل المستخدم إن أراد المتابعة
                if (confirm('حدث خطأ أثناء التحقق من وجود روت نشط. هل ترغب بالمتابعة؟')) {
                    form.submit();
                }
            }
        });
    });

});
</script>

<style>
.day-container {
    background-color: #f9f9f9; 
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
}
.interval-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}
select.form-control {
    min-height: 100px;
}
</style>
@endsection