@php
    $isEditMode = isset($job) && !empty($job);
@endphp

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasAddJob" aria-labelledby="offcanvasAddJobLabel">
    <div class="offcanvas-header border-bottom">
        <h5 id="offcanvasAddJobLabel" class="offcanvas-title">{{ $isEditMode ? 'Edit Job' : 'Add Job' }}</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body d-flex flex-column p-0">
        <form class="add-job-form d-flex flex-column flex-fill" id="addJobForm" method="POST" action="#" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="job_id" id="job-id" value="{{ $isEditMode ? ($job->id ?? '') : '' }}" />

            <div class="flex-fill overflow-auto px-4 pt-4 pb-3">

                <!-- Jobs Short Name -->
                <div class="mb-4">
                    <label class="form-label" for="add-job-short-name">Jobs Short Name <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="add-job-short-name" name="job_short_name" placeholder="Enter jobs short name" value="" required />
                </div>

                <!-- Job Name -->
                <div class="mb-4">
                    <label class="form-label" for="add-job-name">Job Name <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="add-job-name" name="job_name" placeholder="Enter job name" value="" required />
                </div>

                <!-- Job Other Names -->
                <div class="mb-4">
                    <label class="form-label" for="add-job-other-names">Job Other Names</label>
                    <input type="text" class="form-control" id="add-job-other-names" name="job_other_names" placeholder="Enter job other names" value="" />
                </div>

                <!-- Address -->
                <div class="mb-4">
                    <label class="form-label" for="add-address">Address</label>
                    <textarea class="form-control" id="add-address" name="address" rows="2" placeholder="Enter address"></textarea>
                </div>

                <!-- Additional Address -->
                <div class="mb-4">
                    <label class="form-label" for="add-additional-address">Additional Address</label>
                    <textarea class="form-control" id="add-additional-address" name="additional_address" rows="2" placeholder="Enter additional address"></textarea>
                </div>

                <!-- City -->
                <div class="mb-4">
                    <label class="form-label" for="add-city">City</label>
                    <select id="add-city" name="city" class="form-select">
                        <option value="">Select City</option>
                        <option value="New York">New York</option>
                        <option value="Los Angeles">Los Angeles</option>
                        <option value="Chicago">Chicago</option>
                        <option value="Houston">Houston</option>
                        <option value="Phoenix">Phoenix</option>
                        <option value="Philadelphia">Philadelphia</option>
                        <option value="San Antonio">San Antonio</option>
                        <option value="San Diego">San Diego</option>
                        <option value="Dallas">Dallas</option>
                        <option value="San Jose">San Jose</option>
                    </select>
                </div>

                <!-- State -->
                <div class="mb-4">
                    <label class="form-label" for="add-state">State</label>
                    <select id="add-state" name="state" class="form-select">
                        <option value="">Select State</option>
                        <option value="AL">Alabama</option>
                        <option value="AK">Alaska</option>
                        <option value="AZ">Arizona</option>
                        <option value="AR">Arkansas</option>
                        <option value="CA">California</option>
                        <option value="CO">Colorado</option>
                        <option value="CT">Connecticut</option>
                        <option value="DE">Delaware</option>
                        <option value="FL">Florida</option>
                        <option value="GA">Georgia</option>
                    </select>
                </div>

                <!-- Zip -->
                <div class="mb-4">
                    <label class="form-label" for="add-zip">Zip</label>
                    <input type="text" class="form-control" id="add-zip" name="zip" placeholder="Enter zip code" value="" />
                </div>

                <!-- Contact Name -->
                <div class="mb-4">
                    <label class="form-label" for="add-contact-name">Contact Name</label>
                    <input type="text" class="form-control" id="add-contact-name" name="contact_name" placeholder="Enter contact name" value="" />
                </div>

                <!-- Phone Number -->
                <div class="mb-4">
                    <label class="form-label" for="add-phone-number">Phone Number</label>
                    <input type="text" class="form-control" id="add-phone-number" name="phone_number" placeholder="Enter phone number" value="" />
                </div>

                <!-- Email Address -->
                <div class="mb-4">
                    <label class="form-label" for="add-email-address">Email Address</label>
                    <input type="email" class="form-control" id="add-email-address" name="email_address" placeholder="Enter email address" value="" />
                </div>

                <!-- Parcel -->
                <div class="mb-4">
                    <label class="form-label" for="add-parcel">Parcel</label>
                    <input type="text" class="form-control" id="add-parcel" name="parcel" placeholder="Enter parcel" value="" />
                </div>

                <!-- Entered in Job QB Required -->
                <div class="mb-4">
                    <label class="form-label" for="add-qb-required">Entered in Job QB Required <span class="text-danger">*</span></label>
                    <select id="add-qb-required" name="entered_in_job_qb_required" class="form-select" required>
                        <option value="">Select Option</option>
                        <option value="0" >No</option>
                        <option value="1" >Yes</option>
                    </select>
                </div>

            </div>

            <!-- Footer with submit button -->
            <div class="offcanvas-footer border-top p-4 mt-auto">
                <button type="submit" class="btn btn-primary w-100">{{ $isEditMode ? 'Update Job' : 'Add Job' }}</button>
            </div>
        </form>
    </div>
</div>