@include('./admin/util/header')

<div class="row">
    <div class="col-xl-12">
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h4 class="card-title mb-0">
                    <i data-feather="user" class="icon-sm me-2"></i>Edit Leader Info
                </h4>
            </div>
            <div class="card-body">
                <form method="post" class="needs-validation" novalidate action="/admin/leader-edit-request?ID={{$itemID}}">
                    @csrf
                    <input type="hidden" name="eCode" value="2">

                    <!-- Personal Information Section -->
                    <div class="card mb-4 shadow-sm form-section-card">
                        <div class="card-header form-section-header">
                            <h5 class="mb-0">
                                <i data-feather="user" class="icon-sm me-2"></i>Personal Information
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label" for="firstName">
                                            <i data-feather="user" class="icon-xs me-1"></i>First name <span class="text-danger">*</span>
                                        </label>
                                        <input type="text" class="form-control" name="firstName" id="firstName" value="{{ $firstName }}" maxlength="30" required>
                                        <div class="invalid-feedback">Please provide a first name.</div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label" for="lastName">
                                            <i data-feather="user" class="icon-xs me-1"></i>Last name <span class="text-danger">*</span>
                                        </label>
                                        <input type="text" class="form-control" name="lastName" id="lastName" value="{{ $lastName }}" maxlength="30" required>
                                        <div class="invalid-feedback">Please provide a last name.</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Contact Information Section -->
                    <div class="card mb-4 shadow-sm form-section-card">
                        <div class="card-header form-section-header">
                            <h5 class="mb-0">
                                <i data-feather="mail" class="icon-sm me-2"></i>Contact Information
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label" for="email">
                                            <i data-feather="mail" class="icon-xs me-1"></i>Email address <span class="text-danger">*</span>
                                        </label>
                                        <input type="email" class="form-control" name="email" id="email" value="{{ $email }}" maxlength="50" required>
                                        <div class="invalid-feedback">Please provide a valid email address.</div>
                                        <div id="emailExistsError" class="text-danger mt-1" style="display: none;">
                                            <small><i data-feather="alert-circle" class="icon-xs me-1"></i>This email address is already in use by another leader.</small>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label" for="phoneNum">
                                            <i data-feather="phone" class="icon-xs me-1"></i>Phone #
                                        </label>
                                        <input type="text" class="form-control" name="phoneNum" id="phoneNum" value="{{ $phoneNum }}" maxlength="30">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label" for="faxNum">
                                            <i data-feather="printer" class="icon-xs me-1"></i>Fax #
                                        </label>
                                        <input type="text" class="form-control" name="faxNum" id="faxNum" value="{{ $faxNum }}" maxlength="30">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label" for="termsID">
                                            <i data-feather="file-text" class="icon-xs me-1"></i>Terms
                                        </label>
                                        <select class="form-select" name="termsID" id="termsID">
                                            <option value="">- No terms</option>
                                            @foreach ($terms as $term)
                                                <option value="{{ $term->termsID }}" {{ $termsID == $term->termsID ? 'selected' : '' }}>{{ $term->terms }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Company Information Section -->
                    <div class="card mb-4 shadow-sm form-section-card">
                        <div class="card-header form-section-header">
                            <h5 class="mb-0">
                                <i data-feather="briefcase" class="icon-sm me-2"></i>Company Information
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label" for="companyID">
                                            <i data-feather="building" class="icon-xs me-1"></i>Company
                                        </label>
                                        <select class="form-select" name="companyID" id="companyID">
                                            <option value="">- No company</option>
                                            @foreach ($companies as $company)
                                                <option value="{{ $company->id }}" {{ $companyID == $company->id ? 'selected' : '' }}>{{ $company->company_name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label" for="companyName">
                                            <i data-feather="file-text" class="icon-xs me-1"></i>Company name (manual entry)
                                        </label>
                                        <input type="text" class="form-control" name="companyName" id="companyName" value="{{ $companyName }}" maxlength="50">
                                        <small class="form-text text-muted">Optional: Enter company name manually if not in dropdown</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Billing Address Section -->
                    <div class="card mb-4 shadow-sm form-section-card">
                        <div class="card-header form-section-header">
                            <h5 class="mb-0">
                                <i data-feather="map-pin" class="icon-sm me-2"></i>Billing Address
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label class="form-label" for="billAdd">
                                            <i data-feather="home" class="icon-xs me-1"></i>Address
                                        </label>
                                        <input type="text" class="form-control" name="billAdd" id="billAdd" value="{{ $billAdd }}" maxlength="50">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label class="form-label" for="billAdd2">Address Line 2</label>
                                        <input type="text" class="form-control" name="billAdd2" id="billAdd2" value="{{ $billAdd2 }}" maxlength="50">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label" for="billCity">
                                            <i data-feather="map" class="icon-xs me-1"></i>City
                                        </label>
                                        <input type="text" class="form-control" name="billCity" id="billCity" value="{{ $billCity }}" maxlength="30">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="mb-3">
                                        <label class="form-label" for="billState">State</label>
                                        {{showStates('billState',$billState)}}
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="mb-3">
                                        <label class="form-label" for="billZip">Zip code</label>
                                        <input type="text" class="form-control" name="billZip" id="billZip" value="{{ $billZip }}" maxlength="20">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label" for="billCountry">
                                            <i data-feather="globe" class="icon-xs me-1"></i>Country
                                        </label>