@extends('layouts.dashboard')

@section('content')
<div class="max-w-4xl mx-auto p-6">

    @if(session('success'))
        <div class="mb-4 rounded-2xl bg-emerald-50 border border-emerald-200 text-emerald-800 px-5 py-4">
            {{ session('success') }}
        </div>
    @endif

    <div class="rounded-3xl bg-white border border-gray-200 shadow-sm p-6">
        <h1 class="text-3xl font-black mb-1">Edit Area</h1>
        <p class="text-slate-500 mb-6">Assign one or more salesmen to {{ $area->name }}.</p>

        <form method="POST" action="{{ route('areas.update', $area) }}" class="space-y-5">
            @csrf
            @method('PUT')

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <input name="name" value="{{ old('name', $area->name) }}" class="input input-bordered bg-white text-black" required>
                <input name="sort_order" type="number" value="{{ old('sort_order', $area->sort_order) }}" class="input input-bordered bg-white text-black">
            </div>

            <label class="label cursor-pointer justify-start gap-3">
                <input type="checkbox" name="is_active" value="1" class="checkbox checkbox-primary" @checked($area->is_active)>
                <span class="label-text">Active</span>
            </label>

            <div class="rounded-2xl bg-slate-50 border border-slate-200 p-4">
                <div class="font-black mb-3">Assign Salesmen</div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                    @foreach($salesmen as $salesman)
                        <label class="flex items-center gap-3 rounded-xl bg-white border border-slate-200 p-3">
                            <input type="checkbox" name="salesmen[]" value="{{ $salesman->id }}" class="checkbox checkbox-primary"
                                   @checked(in_array($salesman->id, $assigned))>
                            <span>
                                <b>{{ $salesman->name }}</b>
                                <br>
                                <small class="text-slate-500">{{ $salesman->email }}</small>
                            </span>
                        </label>
                    @endforeach
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                <button class="btn btn-primary w-full">Save Changes</button>
                <a href="{{ route('areas.index') }}" class="btn btn-ghost w-full">← Back</a>
            </div>
        </form>
    </div>
</div>
@endsection