{{-- resources/views/itins/create.blade.php --}}
@extends('layouts.base')

@section('title', __('Create an itinerary'))

@section('content')
@php
    $isPro = request()->routeIs('pro.*');

    // URLs AJAX
    $urlAdmins  = route(($isPro ? 'pro.'   : 'admin.').'itins.adminsForSociety',   ['locale'=>app()->getLocale()]);
    $urlUsers   = route(($isPro ? 'pro.'   : 'admin.').'itins.usersForSociety',    ['locale'=>app()->getLocale()]);
    $urlPoints  = route(($isPro ? 'pro.'   : 'admin.').'itins.pointsForContext',   ['locale'=>app()->getLocale()]);

    // URL submit / back
    $postUrl = route(($isPro ? 'pro.' : 'admin.').'itins.store', ['locale'=>app()->getLocale()]);
    $backUrl = route(($isPro ? 'pro.' : 'admin.').'itins.index', ['locale'=>app()->getLocale()]);

    // --- Pré-seed pour admin pro ---
    // Pour un admin pro :
    //   - il n’a accès qu’à SA société (normalement une seule dans $societies)
    //   - l’admin pro responsable = lui-même
    //   - les users = membres de SA société
    // On va donc préparer ces valeurs pour le JS.
    $seedSocietyId = null;
    $seedAdminId   = null;

    $authUser = auth()->user();

    if ($isPro && $authUser) {
        // société unique du pro: on prend la première du tableau $societies
        // (dans ton controller create(), pour un pro tu dois déjà limiter $societies à SES sociétés)
        $firstSoc = $societies->first();
        if ($firstSoc) {
            $seedSocietyId = $firstSoc->id;
        }
        // l'admin pro responsable = l'utilisateur courant
        $seedAdminId = $authUser->id;
    }
@endphp

<style>
    .twocol { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
    .panel { border:var(--border); border-radius:12px; overflow:hidden; }
    .panel-hd { padding:10px 12px; border-bottom:var(--border); }
    .panel-hd h4 { margin:0; font-size:.95rem; font-weight:600; }
    .list { padding:10px; min-height:220px; border-top:var(--border); }
    .row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; border:1px solid var(--border-color,#1f2430); border-radius:8px; margin-bottom:8px; }
    .row .btn.small { padding:2px 10px !important; font-size:.8rem; }
    .muted { color:#a7acb4; font-size:.85rem; }
    .chk { display:flex; padding:8px 10px; }
    .chk input { margin-right:6px; }
</style>

<div class="wrap">
    

    <h2 style="margin-bottom:12px;"><a class="back" href="{{ $backUrl }}">{{ __('Back') }}</a> {{ __('Create an itinerary') }}</h2>

    @if($errors->any())
        <div class="alert danger" style="margin-bottom:16px;">
        <ul style="margin:0 0 0 16px;">
            @foreach($errors->all() as $err)<li>{{ $err }}</li>@endforeach
        </ul>
        </div>
    @endif

    <form method="POST" action="{{ $postUrl }}">
        @csrf

        <div class="card">
        <div class="card-body">

            {{-- Name --}}
            <div class="form-field">
            <label for="name">{{ __('Name') }} *</label>
            <input id="name" type="text" name="name" required value="{{ old('name') }}" placeholder="Ex: Tournée Sud-Est">
            <small class="muted">{{ __('A unique itinerary name.') }}</small>
            </div>

            <div class="twocol" style="margin-top:12px;">
            {{-- Company --}}
            <div class="form-field">
                {{-- <label for="society_id">{{ __('Company') }} *</label> --}}

                @if($isPro)
                    {{-- admin pro: société imposée --}}
                    @php
                        $soc = $societies->first();
                    @endphp
                    <input type="hidden" id="society_id" name="society_id" value="{{ $soc?->id }}">
                    {{-- <div class="muted" style="padding:8px 10px; border:1px solid var(--border-color,#1f2430); border-radius:8px; background:#0e1018;">
                        {{ $soc?->name ?? '—' }}
                    </div>
                    <small class="muted">{{ __('This itinerary will belong to your company.') }}</small> --}}
                @else
                    {{-- super admin: choix libre --}}
                    <select id="society_id" name="society_id" required>
                    <option value="" disabled selected>{{ __('Select…') }}</option>
                    @foreach($societies as $s)
                        <option value="{{ $s->id }}">{{ $s->name }}</option>
                    @endforeach
                    </select>
                    <small class="muted">{{ __('Pick the company this itinerary belongs to.') }}</small>
                @endif
            </div>

            {{-- Pro admin owner --}}
            <div class="form-field">
                {{-- <label for="assigned_user_id">{{ __('Pro admin') }} *</label> --}}

                @if($isPro)
                    {{-- admin pro: c'est lui-même --}}
                    <input type="hidden" id="assigned_user_id" name="assigned_user_id" value="{{ $authUser->id }}">
                    {{-- <div class="muted" style="padding:8px 10px; border:1px solid var(--border-color,#1f2430); border-radius:8px; background:#0e1018;">
                        {{ trim(($authUser->firstname ?? '').' '.($authUser->lastname ?? '')) ?: ('#'.$authUser->id) }}
                    </div>
                    <small class="muted">{{ __('You are responsible for this itinerary.') }}</small> --}}
                @else
                    {{-- super admin: à charger dynamiquement selon la société --}}
                    <select id="assigned_user_id" name="assigned_user_id" required disabled>
                    <option value="">{{ __('Select a company first') }}</option>
                    </select>
                    <small class="muted">{{ __('This user will be the itinerary manager.') }}</small>
                @endif
            </div>
            </div>

            {{-- Assigned users --}}
            <div class="form-field" style="margin-top:16px;">
            <label>{{ __('Assigned users (company members)') }}</label>
            <div id="company-users-box" style="display:grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap:8px;">
                <div class="muted" data-empty>
                    @if($isPro)
                        {{ __('Loading…') }}
                    @else
                        {{ __('Select a company to list its users.') }}
                    @endif
                </div>
            </div>
            <small class="muted">{{ __('All selected users will see this itinerary.') }}</small>
            </div>

            {{-- Waypoints --}}
            <div class="form-field" style="margin-top:20px;">
            <label>{{ __('Waypoints') }}</label>
            <div class="muted" style="margin:0 0 8px;">
                {{ __('Add points (sites / lieux) to visit. You can reorder them.') }}
            </div>

            <div class="twocol">
                {{-- Available --}}
                <div class="panel">
                <div class="panel-hd"><h4>{{ __('Available') }}</h4></div>
                <div id="available-points" class="list">
                    <div class="muted" data-empty>
                        @if($isPro)
                            {{ __('Loading…') }}
                        @else
                            {{ __('Select a company and a Pro admin.') }}
                        @endif
                    </div>
                </div>
                </div>

                {{-- Selected --}}
                <div class="panel">
                <div class="panel-hd"><h4>{{ __('Selected (drag to reorder)') }}</h4></div>
                <div id="selected-points" class="list droplist">
                    <div class="muted" data-empty>{{ __('No waypoint selected yet.') }}</div>
                </div>

                {{-- hidden inputs reflect final order --}}
                <div id="point-ids-hidden"></div>
                </div>
            </div>
            </div>

        </div>
        <div class="card-footer actions">
            <button class="btn primary" type="submit">{{ __('Create') }}</button>
        </div>
        </div>
    </form>
</div>

<script>
    window.ITIN_CREATE_CTX = {
        isPro: @json($isPro), // true si admin pro
        urls: {
            admins: @json($urlAdmins),
            users:  @json($urlUsers),
            points: @json($urlPoints),
        },
        seed: {
            society_id: @json($seedSocietyId),          // société imposée pour admin pro
            admin_id:   @json($seedAdminId),            // l'admin pro lui-même
            preAssignedUserIds: @json($preAssignedUserIds), // précocher lui-même
        },
        i18n: {
            loading: @json(__('Loading…')),
            select: @json(__('Select…')),
            selectCompanyFirst: @json(__('Select a company first')),
            selectCompanyAndAdmin: @json(__('Select a company and a Pro admin.')),
            noAdmins: @json(__('No pro admin for this company')),
            errAdmins: @json(__('Error loading admins')),
            noUsers: @json(__('No users found for this company (excluding root).')),
            unableLoadUsers: @json(__('Unable to load users for this company.')),
            noWaypoints: @json(__('No waypoint for this company / admin.')),
            unableLoadPoints: @json(__('Unable to load waypoints')),
            noneSelected: @json(__('No waypoint selected yet.')),
            add: @json(__('Add')),
            remove: @json(__('Remove')),
        }
    };

    document.addEventListener('DOMContentLoaded', () => {
        const C         = window.ITIN_CREATE_CTX;
        const selSoc    = document.getElementById('society_id');
        const selAdm    = document.getElementById('assigned_user_id');
        const usersBox  = document.getElementById('company-users-box');
        const availBox  = document.getElementById('available-points');
        const selBox    = document.getElementById('selected-points');
        const hiddenBox = document.getElementById('point-ids-hidden');

        // --- small helpers -------------------------------------------------

        function clearEmpty(el) {
            const e = el.querySelector('[data-empty]');
            if (e) e.remove();
        }

        function updateHidden() {
            hiddenBox.innerHTML = '';
            selBox.querySelectorAll('.row[data-id]').forEach(row => {
                const inp = document.createElement('input');
                inp.type = 'hidden';
                inp.name = 'point_ids[]';
                inp.value = row.dataset.id;
                hiddenBox.appendChild(inp);
            });
        }

        function makeSelectedRow(id, name) {
            const div = document.createElement('div');
            div.className = 'row';
            div.dataset.id = String(id);
            div.dataset.list = 'selected';
            div.draggable = true;
            div.innerHTML = `
                <span>${name || ('#'+id)}</span>
                <div style="display:flex; gap:6px;">
                    <button type="button" class="btn small danger remove">${C.i18n.remove}</button>
                </div>`;
            return div;
        }

        function makeAvailableRow(id, name) {
            const div = document.createElement('div');
            div.className = 'row';
            div.dataset.id = String(id);
            div.dataset.list = 'available';
            div.draggable = false;
            div.innerHTML = `
                <span>${name || ('#'+id)}</span>
                <div style="display:flex; gap:6px;">
                    <button type="button" class="btn small ghost add">${C.i18n.add}</button>
                </div>`;
            return div;
        }

        // enable drag & drop only in the selected column
        (function makeDroppable(container){
            let dragEl = null;
            container.addEventListener('dragstart', e => {
                const row = e.target.closest('.row');
                if (!row || row.dataset.list !== 'selected') return;
                dragEl = row;
                e.dataTransfer.effectAllowed = 'move';
            });
            container.addEventListener('dragover', e => {
                if (!dragEl) return;
                e.preventDefault();
                const rows = [...container.querySelectorAll('.row')];
                const after = rows.find(r => {
                    const rect = r.getBoundingClientRect();
                    return e.clientY < rect.top + rect.height/2;
                });
                if (after) container.insertBefore(dragEl, after);
                else container.appendChild(dragEl);
            });
            container.addEventListener('drop',   () => { dragEl = null; updateHidden(); });
            container.addEventListener('dragend',() => { dragEl = null; updateHidden(); });
        })(selBox);

        // block dragstart on the left
        availBox.addEventListener('dragstart', e => e.preventDefault());

        // global click handler for Add / Remove
        document.addEventListener('click', e => {
            const addBtn = e.target.closest('.add');
            if (addBtn) {
                e.preventDefault();
                const srcRow = addBtn.closest('.row');
                if (!srcRow) return;
                const id   = srcRow.dataset.id;
                const name = srcRow.querySelector('span')?.textContent?.trim() || `#${id}`;
                clearEmpty(selBox);
                selBox.appendChild(makeSelectedRow(id, name));
                updateHidden();
                return;
            }

            const remBtn = e.target.closest('.remove');
            if (remBtn) {
                e.preventDefault();
                const row = remBtn.closest('.row');
                if (!row) return;
                row.remove();
                if (!selBox.querySelector('.row')) {
                    selBox.innerHTML = `<div class="muted" data-empty>${C.i18n.noneSelected}</div>`;
                }
                updateHidden();
            }
        });

        // --- AJAX loaders --------------------------------------------------

        async function loadAdmins(societyId, preselectId = null) {
            selAdm.disabled = true;
            selAdm.innerHTML = `<option value="">${C.i18n.loading}</option>`;
            try {
                const res  = await safeFetch(`${C.urls.admins}?society_id=${encodeURIComponent(societyId)}`, {
                    headers: {'Accept':'application/json','X-Requested-With':'XMLHttpRequest'},
                    credentials:'same-origin'
                });
                const text = await res.text();
                let admins = [];
                try { admins = JSON.parse(text); } catch(e) { admins = []; }

                if (!Array.isArray(admins) || admins.length === 0) {
                    selAdm.disabled = true;
                    selAdm.innerHTML = `<option value="">${C.i18n.noAdmins}</option>`;
                    return;
                }

                selAdm.disabled = false;
                selAdm.innerHTML = `<option value="">${C.i18n.select}</option>`;
                admins.forEach(u => {
                    const nm = `${u.firstname||''} ${u.lastname||''}`.trim() || `#${u.id}`;
                    const opt = document.createElement('option');
                    opt.value = u.id;
                    opt.textContent = nm;
                    if (preselectId && Number(preselectId) === Number(u.id)) {
                        opt.selected = true;
                    }
                    selAdm.appendChild(opt);
                });
            } catch (err) {
                console.error('loadAdmins error', err);
                selAdm.disabled = true;
                selAdm.innerHTML = `<option value="">${C.i18n.errAdmins}</option>`;
            }
        }

        async function loadUsers(societyId, precheckedIds = []) {
            usersBox.innerHTML = `<div class="muted">${C.i18n.loading}</div>`;
            try {
                const res  = await safeFetch(`${C.urls.users}?society_id=${encodeURIComponent(societyId)}`, {
                    headers:{'Accept':'application/json','X-Requested-With':'XMLHttpRequest'},
                    credentials:'same-origin'
                });
                const text = await res.text();
                let list = [];
                try { list = JSON.parse(text); } catch(e){ list = []; }

                if (!Array.isArray(list) || !list.length) {
                    usersBox.innerHTML = `<div class="muted">${C.i18n.noUsers}</div>`;
                    return;
                }

                usersBox.innerHTML = '';

                list.forEach(u => {
                    const checked = precheckedIds.includes(u.id) || precheckedIds.includes(Number(u.id));
                    const lbl = document.createElement('label');
                    lbl.className = 'chk';
                    lbl.innerHTML = `
                        <input type="checkbox" name="assigned_user_ids[]" value="${u.id}" ${checked?'checked':''}>
                        <span>${(u.firstname||'')+' '+(u.lastname||'')}</span>
                        <small class="muted">— ${u.email||''}</small>
                    `;
                    usersBox.appendChild(lbl);
                });
            } catch (err) {
                console.error('loadUsers error', err);
                usersBox.innerHTML = `<div class="alert danger">${C.i18n.unableLoadUsers}</div>`;
            }
        }

        async function loadPoints(societyId, adminId) {
            availBox.innerHTML = `<div class="muted">${C.i18n.loading}</div>`;

            if (!societyId || !adminId) {
                availBox.innerHTML = `<div class="muted" data-empty>${C.i18n.selectCompanyAndAdmin}</div>`;
                return;
            }

            try {
                const url = `${C.urls.points}?society_id=${encodeURIComponent(societyId)}&admin_id=${encodeURIComponent(adminId)}`;
                const res  = await safeFetch(url, {
                    headers:{'Accept':'application/json','X-Requested-With':'XMLHttpRequest'},
                    credentials:'same-origin'
                });
                const text = await res.text();
                let list = [];
                try { list = JSON.parse(text); } catch(e){ list = []; }

                if (!Array.isArray(list) || !list.length) {
                    availBox.innerHTML = `<div class="muted">${C.i18n.noWaypoints}</div>`;
                    return;
                }

                // on ne filtre PAS les doublons possibles:
                availBox.innerHTML = '';
                list.forEach(p => {
                    availBox.appendChild(makeAvailableRow(p.id, p.name));
                });

            } catch (err) {
                console.error('loadPoints error', err);
                availBox.innerHTML = `<div class="alert danger">${C.i18n.unableLoadPoints}</div>`;
            }
        }

        // --- listeners UI --------------------------------------------------

        // Changement société (admin global uniquement)
        selSoc?.addEventListener('change', async () => {
            const sid = selSoc.value;

            // reset UI
            selAdm.disabled = true;
            selAdm.innerHTML = `<option value="">${C.i18n.loading}</option>`;
            availBox.innerHTML = `<div class="muted" data-empty>${C.i18n.selectCompanyAndAdmin}</div>`;
            selBox.innerHTML   = `<div class="muted" data-empty>${C.i18n.noneSelected}</div>`;
            hiddenBox.innerHTML = '';
            usersBox.innerHTML = `<div class="muted">${C.i18n.loading}</div>`;

            if (!sid) return;

            // recharge admins pro pour cette société
            await loadAdmins(sid, null);

            // recharge les users de cette société
            await loadUsers(sid, []);

            // points : pas encore, on attend le choix de l'admin pro
        });

        // Changement admin pro (admin global uniquement)
        selAdm?.addEventListener('change', async () => {
            const sid = selSoc.value;
            const aid = selAdm.value;
            await loadPoints(sid, aid);
        });

        // --- seed auto pour admin pro --------------------------------------

        if (C.isPro && C.seed.society_id && C.seed.admin_id) {
            // 1. lock society/admin selects
            if (selSoc) {
                selSoc.value = C.seed.society_id;
                selSoc.disabled = true;
            }
            if (selAdm) {
                // on met juste UNE option = lui-même
                selAdm.innerHTML = '';
                const opt = document.createElement('option');
                opt.value = C.seed.admin_id;
                opt.textContent = '{{ auth()->user()->firstname ?? "" }} {{ auth()->user()->lastname ?? "" }}'.trim() || ('#'+C.seed.admin_id);
                opt.selected = true;
                selAdm.appendChild(opt);
                selAdm.disabled = true;
            }

            // 2. charger direct les users de la société (en cochant déjà l'admin pro)
            loadUsers(C.seed.society_id, C.seed.preAssignedUserIds || []);

            // 3. charger direct les waypoints dispo (société + partagés + publics)
            loadPoints(C.seed.society_id, C.seed.admin_id);
        }
    });
</script>

@endsection