@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-pencil-square"></i> Edit 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">Edit 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('subadmin.update')}}" method="POST" enctype="multipart/form-data">
        @csrf
        <input type="hidden" name="subadmin_id" value="{{$subadmin->id}}">

        <!-- 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', $subadmin->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', $subadmin->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', $subadmin->gender) == 'Male' ? 'selected' : ''}}>Male</option>
                            <option value="Female" {{old('gender', $subadmin->gender) == 'Female' ? 'selected' : ''}}>Female</option>
                            <option value="Other" {{old('gender', $subadmin->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>
                        @if($subadmin->photo)
                            <div class="mb-2">
                                <img src="data:image/png;base64,{{$subadmin->photo}}" alt="Current Photo" 
                                     class="img-thumbnail" style="max-width: 150px;">
                                <p class="text-muted small mb-0">Current photo (will be replaced if you upload a new one)</p>
                            </div>
                        @endif
                        <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">Leave empty to keep current photo</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', $subadmin->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', $subadmin->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', $subadmin->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', $subadmin->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', $subadmin->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', $subadmin->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', $subadmin->nationality)}}">
                    </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 Update 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-primary btn-lg px-5 shadow">
                        <i class="bi bi-check-circle-fill"></i> Update Sub-Admin
                    </button>
                </div>
            </div>
        </div>
    </form>
                </div>
            </div>
            @include('layouts.footer')
        </div>
    </div>
</div>

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