@extends('layouts.admin')
@section('title', 'Add Division')
@section('content')

<a href="{{ route('admin.divisions.index') }}"
   class="inline-flex items-center gap-1.5 text-sm text-slate-500 hover:text-slate-700 mb-6 transition-colors">
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
    </svg>
    Back to Divisions
</a>

<div class="mb-6">
    <h1 class="text-2xl font-bold text-slate-800">Add Division</h1>
    <p class="text-slate-500 text-sm mt-1">Create a new division and its head user account</p>
</div>

<form method="POST" action="{{ route('admin.divisions.store') }}" class="grid grid-cols-1 xl:grid-cols-2 gap-6">
    @csrf

    {{-- Division info --}}
    <div class="bg-white rounded-xl border border-slate-200 p-6 space-y-4">
        <h2 class="font-semibold text-slate-800 pb-2 border-b border-slate-100">Division Information</h2>

        <div>
            <label class="block text-sm font-medium text-slate-700 mb-1.5">Division Name <span class="text-red-500">*</span></label>
            <input type="text" name="name" required value="{{ old('name') }}"
                   class="w-full border border-slate-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
        </div>
        <div>
            <label class="block text-sm font-medium text-slate-700 mb-1.5">Division Code <span class="text-red-500">*</span></label>
            <input type="text" name="code" required value="{{ old('code') }}" placeholder="e.g. DIV-002"
                   class="w-full border border-slate-300 rounded-lg px-3 py-2.5 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500">
        </div>
        <div>
            <label class="block text-sm font-medium text-slate-700 mb-1.5">Contact Person</label>
            <input type="text" name="contact_person" value="{{ old('contact_person') }}"
                   class="w-full border border-slate-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
        </div>
        <div>
            <label class="block text-sm font-medium text-slate-700 mb-1.5">Contact Email</label>
            <input type="email" name="contact_email" value="{{ old('contact_email') }}"
                   class="w-full border border-slate-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
        </div>
        <div>
            <label class="block text-sm font-medium text-slate-700 mb-1.5">Contact Phone</label>
            <input type="text" name="contact_phone" value="{{ old('contact_phone') }}"
                   class="w-full border border-slate-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
        </div>
        <div>
            <label class="block text-sm font-medium text-slate-700 mb-1.5">Address</label>
            <textarea name="address" rows="3"
                      class="w-full border border-slate-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none">{{ old('address') }}</textarea>
        </div>
    </div>

    {{-- Division head account --}}
    <div class="bg-white rounded-xl border border-slate-200 p-6 space-y-4">
        <h2 class="font-semibold text-slate-800 pb-2 border-b border-slate-100">Division Head Account</h2>
        <p class="text-sm text-slate-500">This creates the login account for the division head.</p>

        <div>
            <label class="block text-sm font-medium text-slate-700 mb-1.5">Full Name <span class="text-red-500">*</span></label>
            <input type="text" name="head_name" required value="{{ old('head_name') }}"
                   class="w-full border border-slate-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
        </div>
        <div>
            <label class="block text-sm font-medium text-slate-700 mb-1.5">Login Email <span class="text-red-500">*</span></label>
            <input type="email" name="head_email" required value="{{ old('head_email') }}"
                   class="w-full border border-slate-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
        </div>
        <div>
            <label class="block text-sm font-medium text-slate-700 mb-1.5">Temporary Password <span class="text-red-500">*</span></label>
            <input type="text" name="head_password" required
                   class="w-full border border-slate-300 rounded-lg px-3 py-2.5 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500"
                   placeholder="Min. 8 characters">
            <p class="text-xs text-slate-400 mt-1">Share this with the division head. They can change it after logging in.</p>
        </div>

        <div class="pt-4">
            <button type="submit"
                    class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2.5 rounded-lg transition-colors text-sm">
                Create Division
            </button>
        </div>
    </div>
</form>
@endsection