@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-start">
        @include('layouts.left-menu')
        <div class="col-xs-11 col-sm-11 col-md-11 col-lg-10 col-xl-10 col-xxl-10">
            <div class="row pt-2">
                <div class="col ps-4">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="display-6 mb-0">
                        <i class="bi bi-person-plus-fill"></i> Add Sub-Admin
                    </h1>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{route('home')}}">Home</a></li>
                            <li class="breadcrumb-item"><a href="{{route('subadmin.list.show')}}">Sub-Admin List</a></li>
                            <li class="breadcrumb-item active">Add Sub-Admin</li>
                        </ol>
                    </nav>
                </div>
                <div>
                    <a href="{{route('subadmin.list.show')}}" class="btn btn-outline-secondary">
                        <i class="bi bi-arrow-left"></i> Back to List
                    </a>
                </div>
            </div>
        </div>
    </div>

    @include('session-messages')

    <!-- Validation Errors -->
    @if ($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <h5 class="alert-heading"><i class="bi bi-exclamation-triangle-fill"></i> Validation Errors</h5>
            <ul class="mb-0">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <form action="{{route('school.subadmin.create')}}" method="POST" enctype="multipart/form-data">
        @csrf

        <!-- Personal Information Card -->
        <div class="card shadow-sm border-success mb-4">
            <div class="card-header bg-success text-white">
                <h6 class="mb-0"><i class="bi bi-person-fill"></i> Personal Information</h6>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-4">
                        <label for="inputFirstName" class="form-label fw-bold">
                            <i class="bi bi-person"></i> First Name 
                            <sup><i class="bi bi-asterisk text-danger"></i></sup>
                        </label>
                        <input type="text" class="form-control form-control-lg" id="inputFirstName" 
                               name="first_name" placeholder="Enter first name" required 
                               value="{{old('first_name')}}">
                    </div>
                    <div class="col-md-4">
                        <label for="inputLastName" class="form-label fw-bold">
                            <i class="bi bi-person"></i> Last Name 
                            <sup><i class="bi bi-asterisk text-danger"></i></sup>
                        </label>
                        <input type="text" class="form-control form-control-lg" id="inputLastName" 
                               name="last_name" placeholder="Enter last name" required 
                               value="{{old('last_name')}}">
                    </div>
                    <div class="col-md-4">
                        <label for="inputGender" class="form-label fw-bold">
                            <i class="bi bi-gender-ambiguous"></i> Gender 
                            <sup><i class="bi bi-asterisk text-danger"></i></sup>
                        </label>
                        <select id="inputGender" class="form-select form-select-lg" name="gender" required>
                            <option value="Male" {{old('gender') == 'Male' ? 'selected' : ''}}>Male</option>
                            <option value="Female" {{old('gender') == 'Female' ? 'selected' : ''}}>Female</option>
                            <option value="Other" {{old('gender') == 'Other' ? 'selected' : ''}}>Other</option>
                        </select>
                    </div>
                    <div class="col-md-12">
                        <label for="formFile" class="form-label fw-bold">
                            <i class="bi bi-camera-fill"></i> Photo (Optional)
                        </label>
                        <input class="form-control form-control-lg" type="file" id="formFile" 
                               name="photo" onchange="previewFile()" accept="image/*">
                        <div id="previewPhoto" class="mt-2"></div>
                        <small class="text-muted">Recommended: Square image, max 2MB</small>
                    </div>
                </div>
            </div>
        </div>

        <!-- Contact Information Card -->
        <div class="card shadow-sm border-info mb-4">
            <div class="card-header bg-info text-white">
                <h6 class="mb-0"><i class="bi bi-telephone-fill"></i> Contact Information</h6>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label for="inputEmail" class="form-label fw-bold">
                            <i class="bi bi-envelope"></i> Email Address 
                            <sup><i class="bi bi-asterisk text-danger"></i></sup>
                        </label>
                        <input type="email" class="form-control form-control-lg" id="inputEmail" 
                               name="email" placeholder="email@example.com" required 
                               value="{{old('email')}}">
                        <small class="text-muted">This will be used for login</small>
                    </div>
                    <div class="col-md-6">
                        <label for="inputPhone" class="form-label fw-bold">
                            <i class="bi bi-phone"></i> Phone Number 
                            <sup><i class="bi bi-asterisk text-danger"></i></sup>
                        </label>
                        <input type="text" class="form-control form-control-lg" id="inputPhone" 
                               name="phone" placeholder="+92 300 1234567" required 
                               value="{{old('phone')}}">
                    </div>
                </div>
            </div>
        </div>

        <!-- Address Information Card -->
        <div class="card shadow-sm border-warning mb-4">
            <div class="card-header bg-warning text-dark">
                <h6 class="mb-0"><i class="bi bi-geo-alt-fill"></i> Address Information</h6>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-12">
                        <label for="inputAddress" class="form-label fw-bold">
                            <i class="bi bi-house"></i> Address Line 1 
                            <sup><i class="bi bi-asterisk text-danger"></i></sup>
                        </label>
                        <input type="text" class="form-control form-control-lg" id="inputAddress" 
                               name="address" placeholder="House/Building, Street" required 
                               value="{{old('address')}}">
                    </div>
                    <div class="col-md-12">
                        <label for="inputAddress2" class="form-label fw-bold">
                            <i class="bi bi-house"></i> Address Line 2 (Optional)
                        </label>
                        <input type="text" class="form-control form-control-lg" id="inputAddress2" 
                               name="address2" placeholder="Apartment, Floor, Area" 
                               value="{{old('address2')}}">
                    </div>
                    <div class="col-md-4">
                        <label for="inputCity" class="form-label fw-bold">
                            <i class="bi bi-building"></i> City 
                            <sup><i class="bi bi-asterisk text-danger"></i></sup>
                        </label>
                        <input type="text" class="form-control form-control-lg" id="inputCity" 
                               name="city" placeholder="Karachi" required 
                               value="{{old('city')}}">
                    </div>
                    <div class="col-md-4">
                        <label for="inputZip" class="form-label fw-bold">
                            <i class="bi bi-mailbox"></i> Zip/Postal Code 
                            <sup><i class="bi bi-asterisk text-danger"></i></sup>
                        </label>
                        <input type="text" class="form-control form-control-lg" id="inputZip" 
                               name="zip" placeholder="75500" required 
                               value="{{old('zip')}}">
                    </div>
                    <div class="col-md-4">
                        <label for="inputNationality" class="form-label fw-bold">
                            <i class="bi bi-flag"></i> Nationality 
                            <sup><i class="bi bi-asterisk text-danger"></i></sup>
                        </label>
                        <input type="text" class="form-control form-control-lg" id="inputNationality" 
                               name="nationality" placeholder="Pakistani" required 
                               value="{{old('nationality')}}">
                    </div>
                </div>
            </div>
        </div>

        <!-- Security & Access Card -->
        <div class="card shadow-sm border-danger mb-4">
            <div class="card-header bg-danger text-white">
                <h6 class="mb-0"><i class="bi bi-shield-lock-fill"></i> Security & Access</h6>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label for="inputPassword" class="form-label fw-bold">
                            <i class="bi bi-key"></i> Password 
                            <sup><i class="bi bi-asterisk text-danger"></i></sup>
                        </label>
                        <input type="password" class="form-control form-control-lg" id="inputPassword" 
                               name="password" placeholder="Enter password" required>
                        <small class="text-muted">Minimum 8 characters</small>
                    </div>
                    <div class="col-md-6">
                        <label for="inputPasswordConfirmation" class="form-label fw-bold">
                            <i class="bi bi-key-fill"></i> Confirm Password 
                            <sup><i class="bi bi-asterisk text-danger"></i></sup>
                        </label>
                        <input type="password" class="form-control form-control-lg" 
                               id="inputPasswordConfirmation" name="password_confirmation" 
                               placeholder="Confirm password" required>
                    </div>
                    <div class="col-md-12">
                        <label for="inputRole" class="form-label fw-bold">
                            <i class="bi bi-person-badge"></i> Role/Permissions 
                            <sup><i class="bi bi-asterisk text-danger"></i></sup>
                        </label>
                        <select id="inputRole" class="form-select form-select-lg" name="role" required>
                            <option value="" disabled selected>Select role...</option>
                            <option value="academic" {{old('role') == 'academic' ? 'selected' : ''}}>
                                📚 Academic Manager - Manage classes, students, teachers
                            </option>
                            <option value="finance" {{old('role') == 'finance' ? 'selected' : ''}}>
                                💰 Finance Manager - Manage payments and fees
                            </option>
                            <option value="operations" {{old('role') == 'operations' ? 'selected' : ''}}>
                                ⚙️ Operations Manager - Full access except settings
                            </option>
                            <option value="limited" {{old('role') == 'limited' ? 'selected' : ''}}>
                                🔒 Limited Access - View only permissions
                            </option>
                        </select>
                        <small class="text-muted">Sub-admins can manage day-to-day operations but cannot access system settings</small>
                    </div>
                </div>
            </div>
        </div>

        <!-- Submit Button -->
        <div class="card shadow-sm">
            <div class="card-body d-flex justify-content-between align-items-center">
                <div>
                    <h5 class="mb-0">
                        <i class="bi bi-check-circle"></i> Ready to Add Sub-Admin?
                    </h5>
                    <small class="text-muted">
                        Please review all information before submitting
                    </small>
                </div>
                <div>
                    <a href="{{route('subadmin.list.show')}}" class="btn btn-secondary btn-lg me-2">
                        <i class="bi bi-x-circle"></i> Cancel
                    </a>
                    <button type="submit" class="btn btn-success btn-lg px-5 shadow">
                        <i class="bi bi-person-plus-fill"></i> Add Sub-Admin
                    </button>
                </div>
            </div>
        </div>
    </form>
                </div>
            </div>
            @include('layouts.footer')
        </div>
    </div>
</div>

@include('components.photos.photo-input')
@endsection