@extends('coach.layouts.app')

@section('title', $plan->name)

@section('content')
    <div class="flex items-center justify-between mb-2">
        <h1 class="text-xl font-bold">{{ $plan->name }}</h1>
        <a href="{{ route('coach.workout-plans.edit', $plan) }}" class="text-sm text-blue-600 hover:underline">ویرایش اطلاعات برنامه</a>
    </div>
    <p class="text-sm text-gray-500 mb-6">
        برای {{ $plan->athlete->user->fullName() }} · وضعیت: {{ $plan->status->label() }}
        @if($plan->goal) · هدف: {{ $plan->goal->title }} @endif
    </p>

    {{-- افزودن جلسه --}}
    <form method="POST" action="{{ route('coach.workout-plans.sessions.store', $plan) }}" class="flex flex-col sm:flex-row gap-2 mb-6">
        @csrf
        <input type="text" name="title" placeholder="نام جلسه (اختیاری — مثلاً «جلسه بالاتنه»)" class="border rounded-lg px-3 py-2 text-sm flex-1">
        <button class="bg-gray-900 text-white text-sm px-4 py-2 rounded-lg">+ افزودن جلسه</button>
    </form>

    <div id="sessions-list" class="space-y-6">
        @foreach($plan->sessions as $sIndex => $session)
            <div class="bg-white rounded-xl shadow-sm p-4 session-card" draggable="true" data-session-id="{{ $session->id }}">
                <div class="flex items-center justify-between mb-3">
                    <h2 class="font-semibold flex items-center gap-2">
                        <span class="cursor-move text-gray-300 hidden sm:inline" title="جابه‌جایی با درگ (دسکتاپ)">⠿</span>
                        {{ $session->title }}
                    </h2>
                    <div class="flex items-center gap-1">
                        {{-- دکمه‌های بالا/پایین — جایگزین موبایل‌فرندلی Drag & Drop
                             (که روی مرورگرهای موبایل با لمس کار نمی‌کند — بند ۶۸، Phase 15) --}}
                        <form method="POST" action="{{ route('coach.workout-plans.sessions.reorder', $plan) }}"
                              onsubmit="return moveSessionUp(event, {{ $session->id }})">
                            @csrf
                            <button type="submit" class="text-gray-400 hover:text-gray-700 px-1" title="جابه‌جایی به بالا" @if($sIndex === 0) disabled @endif>▲</button>
                        </form>
                        <form method="POST" action="{{ route('coach.workout-plans.sessions.reorder', $plan) }}"
                              onsubmit="return moveSessionDown(event, {{ $session->id }})">
                            @csrf
                            <button type="submit" class="text-gray-400 hover:text-gray-700 px-1" title="جابه‌جایی به پایین" @if($sIndex === $plan->sessions->count() - 1) disabled @endif>▼</button>
                        </form>
                        <form method="POST" action="{{ route('coach.workout-sessions.destroy', $session) }}" onsubmit="return confirm('این جلسه و همه حرکاتش حذف شود؟');">
                            @csrf @method('DELETE')
                            <button class="text-red-600 text-xs hover:underline mr-2">حذف</button>
                        </form>
                    </div>
                </div>

                <div class="space-y-2 exercises-list" data-session-id="{{ $session->id }}">
                    @foreach($session->exercises as $eIndex => $ex)
                        <div class="border rounded-lg p-3 flex items-center gap-3 exercise-card" draggable="true" data-exercise-id="{{ $ex->id }}">
                            <span class="cursor-move text-gray-300 hidden sm:inline">⠿</span>

                            @if($ex->exercise->gif_path)
                                <img src="{{ Storage::disk('public')->url($ex->exercise->gif_path) }}" class="w-14 h-14 rounded object-cover shrink-0">
                            @else
                                <div class="w-14 h-14 rounded bg-gray-100 shrink-0"></div>
                            @endif

                            <div class="flex-1 min-w-0">
                                <div class="font-medium text-sm">{{ $ex->exercise->name }}</div>
                                <div class="text-xs text-gray-400">{{ $ex->exercise->mainMuscle?->name }}</div>
                                <div class="text-xs text-gray-500 mt-1 flex flex-wrap gap-x-3">
                                    <span>ست: {{ $ex->sets ?? '—' }}</span>
                                    <span>تکرار: {{ $ex->reps ?? '—' }}</span>
                                    <span>وزن: {{ $ex->weight_kg ?? '—' }}</span>
                                    <span>استراحت: {{ $ex->rest_seconds ?? '—' }}ث</span>
                                </div>
                            </div>

                            <div class="flex flex-col items-end gap-1 text-xs shrink-0">
                                <div class="flex gap-1">
                                    <button type="button" onclick="moveExerciseUp({{ $session->id }}, {{ $ex->id }})"
                                            class="text-gray-400 px-1" @if($eIndex === 0) disabled @endif>▲</button>
                                    <button type="button" onclick="moveExerciseDown({{ $session->id }}, {{ $ex->id }})"
                                            class="text-gray-400 px-1" @if($eIndex === $session->exercises->count() - 1) disabled @endif>▼</button>
                                </div>
                                <button type="button" onclick="document.getElementById('edit-ex-{{ $ex->id }}').classList.toggle('hidden')"
                                        class="text-blue-600 hover:underline">ویرایش</button>
                                <form method="POST" action="{{ route('coach.workout-exercises.duplicate', $ex) }}">
                                    @csrf
                                    <button class="text-gray-500 hover:underline">کپی</button>
                                </form>
                                <form method="POST" action="{{ route('coach.workout-exercises.destroy', $ex) }}" onsubmit="return confirm('حذف شود؟');">
                                    @csrf @method('DELETE')
                                    <button class="text-red-600 hover:underline">حذف</button>
                                </form>
                            </div>
                        </div>

                        <form id="edit-ex-{{ $ex->id }}" method="POST" action="{{ route('coach.workout-exercises.update', $ex) }}"
                              class="hidden border rounded-lg p-3 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-2 bg-gray-50">
                            @csrf @method('PUT')
                            <input type="hidden" name="exercise_id" value="{{ $ex->exercise_id }}">
                            <input type="number" name="sets" value="{{ $ex->sets }}" placeholder="ست" class="border rounded px-2 py-1 text-xs">
                            <input type="text" name="reps" value="{{ $ex->reps }}" placeholder="تکرار" class="border rounded px-2 py-1 text-xs">
                            <input type="number" step="0.5" name="weight_kg" value="{{ $ex->weight_kg }}" placeholder="وزن" class="border rounded px-2 py-1 text-xs">
                            <input type="text" name="intensity" value="{{ $ex->intensity }}" placeholder="توان/RPE" class="border rounded px-2 py-1 text-xs">
                            <input type="text" name="tempo" value="{{ $ex->tempo }}" placeholder="Tempo" class="border rounded px-2 py-1 text-xs">
                            <input type="number" name="rest_seconds" value="{{ $ex->rest_seconds }}" placeholder="استراحت(ث)" class="border rounded px-2 py-1 text-xs">
                            <input type="number" step="0.5" name="one_rm" value="{{ $ex->one_rm }}" placeholder="1RM" class="border rounded px-2 py-1 text-xs">
                            <input type="number" step="0.5" name="percent_one_rm" value="{{ $ex->percent_one_rm }}" placeholder="% 1RM" class="border rounded px-2 py-1 text-xs">
                            <input type="text" name="coach_notes" value="{{ $ex->coach_notes }}" placeholder="توضیحات" class="border rounded px-2 py-1 text-xs col-span-2">
                            <button class="bg-gray-900 text-white text-xs rounded px-3 py-1 col-span-1">ذخیره</button>
                        </form>
                    @empty
                        <p class="text-gray-400 text-sm">هنوز حرکتی اضافه نشده.</p>
                    @endforeach
                </div>

                <div class="mt-3 pt-3 border-t">
                    <form method="POST" action="{{ route('coach.workout-sessions.exercises.store', $session) }}" class="flex flex-wrap gap-2 items-end exercise-add-form">
                        @csrf
                        <div class="flex-1 min-w-full sm:min-w-[160px] relative">
                            <input type="text" class="exercise-search border rounded-lg px-3 py-2 text-sm w-full" placeholder="جستجوی حرکت...">
                            <input type="hidden" name="exercise_id" class="exercise-id-input" required>
                            <div class="exercise-results hidden absolute z-10 bg-white border rounded-lg shadow-md mt-1 w-full max-h-48 overflow-y-auto"></div>
                        </div>
                        <input type="number" name="sets" placeholder="ست" class="border rounded-lg px-2 py-2 text-sm w-16">
                        <input type="text" name="reps" placeholder="تکرار" class="border rounded-lg px-2 py-2 text-sm w-20">
                        <input type="number" name="rest_seconds" placeholder="استراحت(ث)" class="border rounded-lg px-2 py-2 text-sm w-24">
                        <button class="bg-gray-900 text-white text-sm px-4 py-2 rounded-lg">+ افزودن</button>
                    </form>
                </div>
            </div>
        @endforeach
    </div>

    @if($plan->sessions->isEmpty())
        <p class="text-gray-400 text-center py-10">هنوز جلسه‌ای اضافه نشده است.</p>
    @endif

    <script>
        // --- جستجوی حرکت (بدون تغییر نسبت به Phase 7) ---
        document.querySelectorAll('.exercise-add-form').forEach(form => {
            const input = form.querySelector('.exercise-search');
            const hidden = form.querySelector('.exercise-id-input');
            const results = form.querySelector('.exercise-results');
            let timeout;

            input.addEventListener('input', () => {
                clearTimeout(timeout);
                hidden.value = '';
                const q = input.value.trim();
                if (q.length < 1) { results.classList.add('hidden'); return; }
                timeout = setTimeout(() => {
                    fetch(`{{ route('coach.exercises.search') }}?q=${encodeURIComponent(q)}`)
                        .then(r => r.json())
                        .then(items => {
                            results.innerHTML = items.map(it => `
                                <div class="p-2 hover:bg-gray-50 cursor-pointer text-sm flex items-center gap-2" data-id="${it.id}" data-name="${it.name}">
                                    ${it.gif_url ? `<img src="${it.gif_url}" class="w-8 h-8 rounded object-cover">` : ''}
                                    <span>${it.name}</span>
                                    <span class="text-gray-400 text-xs">(${it.main_muscle ?? ''})</span>
                                </div>
                            `).join('');
                            results.classList.toggle('hidden', items.length === 0);
                        });
                }, 250);
            });

            results.addEventListener('click', (e) => {
                const row = e.target.closest('[data-id]');
                if (!row) return;
                hidden.value = row.dataset.id;
                input.value = row.dataset.name;
                results.classList.add('hidden');
            });
        });

        // --- Drag & Drop بومی (فقط دسکتاپ — روی موبایل کار نمی‌کند، به همین دلیل
        //     دکمه‌های ▲▼ بالا/پایین هم اضافه شدند، Phase 15) ---
        function makeSortable(containerSelector, itemSelector, dataAttr, endpointFn) {
            document.querySelectorAll(containerSelector).forEach(container => {
                let dragEl = null;
                container.querySelectorAll(itemSelector).forEach(item => {
                    item.addEventListener('dragstart', () => { dragEl = item; });
                    item.addEventListener('dragover', (e) => {
                        e.preventDefault();
                        const after = [...container.querySelectorAll(itemSelector)].find(el =>
                            el !== dragEl && e.clientY < el.getBoundingClientRect().top + el.offsetHeight / 2);
                        if (after) container.insertBefore(dragEl, after);
                        else container.appendChild(dragEl);
                    });
                    item.addEventListener('dragend', () => {
                        const orderedIds = [...container.querySelectorAll(itemSelector)].map(el => el.dataset[dataAttr]);
                        fetch(endpointFn(container), {
                            method: 'POST',
                            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content },
                            body: JSON.stringify({ ordered_ids: orderedIds }),
                        });
                    });
                });
            });
        }

        makeSortable('#sessions-list', '.session-card', 'sessionId', () => "{{ route('coach.workout-plans.sessions.reorder', $plan) }}");

        const exerciseReorderTemplate = "{{ route('coach.workout-sessions.exercises.reorder', ['session' => '__ID__']) }}";
        makeSortable('.exercises-list', '.exercise-card', 'exerciseId',
            (container) => exerciseReorderTemplate.replace('__ID__', container.dataset.sessionId));

        // --- دکمه‌های ▲▼ — همیشه کار می‌کنند، حتی روی موبایل (Phase 15) ---
        function csrfToken() { return document.querySelector('meta[name=csrf-token]').content; }

        function postReorder(url, orderedIds) {
            return fetch(url, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken() },
                body: JSON.stringify({ ordered_ids: orderedIds }),
            }).then(() => location.reload());
        }

        function moveSessionUp(e, sessionId) {
            e.preventDefault();
            const ids = [...document.querySelectorAll('.session-card')].map(el => +el.dataset.sessionId);
            const i = ids.indexOf(sessionId);
            if (i > 0) [ids[i - 1], ids[i]] = [ids[i], ids[i - 1]];
            postReorder("{{ route('coach.workout-plans.sessions.reorder', $plan) }}", ids);
            return false;
        }

        function moveSessionDown(e, sessionId) {
            e.preventDefault();
            const ids = [...document.querySelectorAll('.session-card')].map(el => +el.dataset.sessionId);
            const i = ids.indexOf(sessionId);
            if (i < ids.length - 1) [ids[i + 1], ids[i]] = [ids[i], ids[i + 1]];
            postReorder("{{ route('coach.workout-plans.sessions.reorder', $plan) }}", ids);
            return false;
        }

        function moveExerciseUp(sessionId, exerciseId) {
            const container = document.querySelector(`.exercises-list[data-session-id="${sessionId}"]`);
            const ids = [...container.querySelectorAll('.exercise-card')].map(el => +el.dataset.exerciseId);
            const i = ids.indexOf(exerciseId);
            if (i > 0) [ids[i - 1], ids[i]] = [ids[i], ids[i - 1]];
            postReorder(`{{ url('/workout-sessions') }}/${sessionId}/exercises/reorder`, ids);
        }

        function moveExerciseDown(sessionId, exerciseId) {
            const container = document.querySelector(`.exercises-list[data-session-id="${sessionId}"]`);
            const ids = [...container.querySelectorAll('.exercise-card')].map(el => +el.dataset.exerciseId);
            const i = ids.indexOf(exerciseId);
            if (i < ids.length - 1) [ids[i + 1], ids[i]] = [ids[i], ids[i + 1]];
            postReorder(`{{ url('/workout-sessions') }}/${sessionId}/exercises/reorder`, ids);
        }
    </script>
@endsection