{{-- Contact Offcanvas - Right-side offcanvas form for add/edit contact --}}
{{-- Props: $entityType, $entityId --}}
@php
    $contactTypes = [
        'primary' => __('Primary'),
        'billing' => __('Billing'),
        'technical' => __('Technical'),
        'sales' => __('Sales'),
        'support' => __('Support'),
        'other' => __('Other'),
    ];
@endphp

<div class="offcanvas offcanvas-end" tabindex="-1" id="contactOffcanvas" aria-labelledby="contactOffcanvasLabel">
    <div class="offcanvas-header">
        <h5 id="contactOffcanvasLabel" class="offcanvas-title">{{ __('Add Contact') }}</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="{{ __('Close') }}"></button>
    </div>
    <div class="offcanvas-body mx-0 flex-grow-0">
        <form id="contactForm" onsubmit="return false;">
            @csrf
            <input type="hidden" name="_method" id="contactMethod" value="POST">
            <input type="hidden" name="contact_id" id="contact_id" value="">
            <input type="hidden" name="entity_type" value="{{ $entityType }}">
            <input type="hidden" name="entity_id" value="{{ $entityId }}">

            {{-- Contact Type --}}
            <div class="mb-3">
                <label class="form-label" for="contact_type">{{ __('Contact Type') }}</label>
                <select id="contact_type" name="contact_type" class="form-select">
                    <option value="">{{ __('Select Type') }}</option>
                    @foreach($contactTypes as $value => $label)
                        <option value="{{ $value }}">{{ $label }}</option>
                    @endforeach
                </select>
                <div class="invalid-feedback"></div>
            </div>

            <div class="row">
                {{-- First Name --}}
                <div class="col-md-6 mb-3">
                    <label class="form-label" for="contact_first_name">{{ __('First Name') }} <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="contact_first_name" name="first_name" placeholder="{{ __('First Name') }}" required>
                    <div class="invalid-feedback"></div>
                </div>

                {{-- Last Name --}}
                <div class="col-md-6 mb-3">
                    <label class="form-label" for="contact_last_name">{{ __('Last Name') }} <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="contact_last_name" name="last_name" placeholder="{{ __('Last Name') }}" required>
                    <div class="invalid-feedback"></div>
                </div>
            </div>

            <div class="row">
                {{-- Job Title --}}
                <div class="col-md-6 mb-3">
                    <label class="form-label" for="contact_job_title">{{ __('Job Title') }}</label>
                    <input type="text" class="form-control" id="contact_job_title" name="job_title" placeholder="{{ __('Job Title') }}">
                    <div class="invalid-feedback"></div>
                </div>

                {{-- Department --}}
                <div class="col-md-6 mb-3">
                    <label class="form-label" for="contact_department">{{ __('Department') }}</label>
                    <input type="text" class="form-control" id="contact_department" name="department" placeholder="{{ __('Department') }}">
                    <div class="invalid-feedback"></div>
                </div>
            </div>

            {{-- Email --}}
            <div class="mb-3">
                <label class="form-label" for="contact_email">{{ __('Email') }}</label>
                <input type="email" class="form-control" id="contact_email" name="email" placeholder="{{ __('Email Address') }}">
                <div class="invalid-feedback"></div>
            </div>

            <div class="row">
                {{-- Phone --}}
                <div class="col-md-6 mb-3">
                    <label class="form-label" for="contact_phone">{{ __('Phone') }}</label>
                    <input type="text" class="form-control" id="contact_phone" name="phone" placeholder="{{ __('Phone Number') }}">
                    <div class="invalid-feedback"></div>
                </div>

                {{-- Mobile --}}
                <div class="col-md-6 mb-3">
                    <label class="form-label" for="contact_mobile">{{ __('Mobile') }}</label>
                    <input type="text" class="form-control" id="contact_mobile" name="mobile" placeholder="{{ __('Mobile Number') }}">
                    <div class="invalid-feedback"></div>
                </div>
            </div>

            {{-- Is Primary Switch --}}
            <div class="mb-3">
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" id="contact_is_primary" name="is_primary" value="1">
                    <label class="form-check-label" for="contact_is_primary">{{ __('Primary Contact') }}</label>
                </div>
                <small class="text-muted">{{ __('Mark this as the main contact person') }}</small>
            </div>

            {{-- General Error Message Area --}}
            <div class="mb-3">
                <small class="text-danger" id="contact-general-error"></small>
            </div>

            {{-- Buttons --}}
            <div class="mt-4">
                <button type="submit" class="btn btn-primary me-sm-3 me-1" id="submitContactBtn">
                    <i class="bx bx-save me-1"></i>{{ __('Save') }}
                </button>
                <button type="reset" class="btn btn-label-secondary" data-bs-dismiss="offcanvas">
                    {{ __('Cancel') }}
                </button>
            </div>
        </form>
    </div>
</div>
