@extends('layouts.dashboard')

@section('content')

<div class="max-w-4xl mx-auto space-y-6">
    @if(session('success'))<div class="alert alert-success">{{session('success')}}</div>@endif

    <div class="card bg-base-100 border border-base-300 shadow-xl">
        <div class="card-body space-y-6">

            <div>
                <h1 class="text-3xl font-black">Confirm Import Type</h1>
                <p class="opacity-60 text-sm">
                    The system made a suggestion. Please confirm or change it before analysis.
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div class="stat bg-base-200 rounded-2xl">
                    <div class="stat-title">File</div>
                    <div class="stat-value text-sm whitespace-normal">
                        {{ $session->original_file }}
                    </div>
                </div>

                <div class="stat bg-base-200 rounded-2xl">
                    <div class="stat-title">System Suggestion</div>
                    <div class="stat-value text-xl">
                        {{ strtoupper(str_replace('_', ' ', $session->suggested_type ?: 'unknown')) }}
                    </div>
                </div>

                <div class="stat bg-base-200 rounded-2xl">
                    <div class="stat-title">Confidence</div>
                    <div class="stat-value text-xl">
                        {{ $session->confidence }}%
                    </div>
                </div>
            </div>

            <div class="card bg-base-200">
                <div class="card-body">
                    <h2 class="font-black text-lg">Why?</h2>

                    <ul class="list-disc list-inside space-y-1 text-sm opacity-80">
                        @foreach(($session->detected_reasons ?? []) as $reason)
                            <li>{{ $reason }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>

            <form method="POST"
                  action="{{ route('import-center.analyze', $session) }}"
                  class="space-y-5">
                @csrf

                <div>
                    <label class="label">
                        <span class="label-text font-bold">
                            Import As
                        </span>
                    </label>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                        @php
                            $types = [
                                'main_price_list' => 'Main Price List — replace full active list',
                                'clearance_price_list' => 'Clearance Price List — replace full active list',
                                'price_update' => 'Price Update — update included products only',
                                'shipment' => 'Shipment — existing shipment workflow',
                                'van_stock' => 'Salesman Van Stock — snapshot replacement',
                            ];
                        @endphp

                        @foreach($types as $value => $label)
                            <label class="cursor-pointer flex items-center gap-3 p-4 rounded-2xl bg-base-200 border border-base-300">
                                <input type="radio"
                                       name="confirmed_type"
                                       value="{{ $value }}"
                                       class="radio radio-primary"
                                       @checked(old('confirmed_type',$session->confirmed_type) === $value)
                                       required>
                                <span class="font-bold">{{ $label }}</span>
                            </label>
                        @endforeach
                    </div>
                </div>


                <div id="van-stock-salesman-box" class="mt-5">
                    <label class="label">
                        <span class="label-text font-bold">
                            Assign Van Stock To
                        </span>
                    </label>

                    <select name="assigned_user_id" class="select select-bordered w-full">
                        <option value="">Select salesman / van</option>
                        @foreach($salesmen ?? [] as $salesman)
                            <option value="{{ $salesman->id }}" @selected(old('assigned_user_id', $session->assigned_user_id) == $salesman->id)>
                                {{ $salesman->name }} — {{ $salesman->email }}
                            </option>
                        @endforeach
                    </select>

                    @error('assigned_user_id')
                        <div class="text-error text-sm mt-2">{{ $message }}</div>
                    @enderror

                    <p class="text-xs opacity-60 mt-2">
                        Required only when Import As is Van Stock.
                    </p>
                </div>

                <script>
                    function toggleVanStockSalesmanBox() {
                        const selected = document.querySelector('input[name="confirmed_type"]:checked')?.value;
                        const box = document.getElementById('van-stock-salesman-box');

                        if (!box) return;

                        box.style.display = selected === 'van_stock' ? 'block' : 'none';
                    }

                    document.querySelectorAll('input[name="confirmed_type"]').forEach((input) => {
                        input.addEventListener('change', toggleVanStockSalesmanBox);
                    });

                    toggleVanStockSalesmanBox();
                </script>

                <div class="flex gap-2">
                    <button class="btn btn-primary">
                        Continue to Analyze
                    </button>

                    <a href="{{ route('import-center.index') }}" class="btn btn-ghost">
                        Back
                    </a>
                </div>
            </form>

        </div>
    </div>

</div>

@endsection