@extends('layouts.dashboard')

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

    <div class="rounded-3xl bg-white border border-gray-200 shadow-sm p-6">
        <h1 class="text-3xl font-black mb-1">Add Salesman</h1>
        <p class="text-slate-500 mb-6">Create a salesman / van salesman account with permanent catalog link.</p>

        <form method="POST" action="{{ route('salesmen.store') }}" enctype="multipart/form-data" class="space-y-5">
            @csrf

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <input name="name" value="{{ old('name') }}" class="input input-bordered bg-white text-black" placeholder="Salesman Name *" required>

                <input name="email" value="{{ old('email') }}" class="input input-bordered bg-white text-black" placeholder="Email *" required>

                <input name="password" type="password" class="input input-bordered bg-white text-black" placeholder="Password (default 12345678)">

                <select name="role" class="select select-bordered bg-white text-black" required>
                    <option value="salesman">Salesman</option>
                    <option value="van_salesman">Van Salesman</option>
                    <option value="admin">Admin</option>
                </select>

                <input name="company_name" value="{{ old('company_name') }}" class="input input-bordered bg-white text-black" placeholder="Company Name">

                <input name="job_title" value="{{ old('job_title') }}" class="input input-bordered bg-white text-black" placeholder="Job Title">

                <input name="whatsapp" value="{{ old('whatsapp') }}" class="input input-bordered bg-white text-black" placeholder="WhatsApp Number">

                <input name="website" value="{{ old('website') }}" class="input input-bordered bg-white text-black" placeholder="Website">

                <input name="address" value="{{ old('address') }}" class="input input-bordered bg-white text-black md:col-span-2" placeholder="Address">

                <input type="file" name="profile_photo" class="file-input file-input-bordered bg-white text-black md:col-span-2">
            </div>

            <textarea name="catalog_description" class="textarea textarea-bordered bg-white text-black w-full min-h-28" placeholder="Catalog description">{{ old('catalog_description') }}</textarea>

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

                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                    @foreach($areas as $area)
                        <label class="flex items-center gap-3 rounded-xl bg-white border border-slate-200 p-3">
                            <input type="checkbox" name="areas[]" value="{{ $area->id }}" class="checkbox checkbox-primary">
                            <span class="font-bold">{{ $area->name }}</span>
                        </label>
                    @endforeach
                </div>
            </div>


            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                <button class="btn btn-primary w-full">💾 Create Salesman</button>

                <a href="{{ route('salesmen.index') }}" class="btn btn-ghost w-full">
                    ← Back
                </a>
            </div>
        </form>
    </div>
</div>
@endsection