{{-- Extends layout --}}
@extends(getThemeBasePath())

@section('page_title')
    {{ $page_title }}
@endsection

{{-- Content --}}
@section('content')
    <!--begin::Content-->
    <div class="row g-7">
        @include('backend.master.directory.common_tab')
        <!--begin::Content-->
        <div class="col-xl-6">
            <!--begin::Contacts-->
            <div class="card card-flush h-lg-100" id="kt_contacts_main">
                <!--begin::Card header-->
                <div class="card-header pt-7" id="kt_chat_contacts_header">
                    <!--begin::Card title-->
                    <div class="card-title">
                        <!--begin::Svg Icon | path: icons/duotune/communication/com005.svg-->
                        <span class="svg-icon svg-icon-1 me-2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                fill="none">
                                <path
                                    d="M20 14H18V10H20C20.6 10 21 10.4 21 11V13C21 13.6 20.6 14 20 14ZM21 19V17C21 16.4 20.6 16 20 16H18V20H20C20.6 20 21 19.6 21 19ZM21 7V5C21 4.4 20.6 4 20 4H18V8H20C20.6 8 21 7.6 21 7Z"
                                    fill="black" />
                                <path opacity="0.3"
                                    d="M17 22H3C2.4 22 2 21.6 2 21V3C2 2.4 2.4 2 3 2H17C17.6 2 18 2.4 18 3V21C18 21.6 17.6 22 17 22ZM10 7C8.9 7 8 7.9 8 9C8 10.1 8.9 11 10 11C11.1 11 12 10.1 12 9C12 7.9 11.1 7 10 7ZM13.3 16C14 16 14.5 15.3 14.3 14.7C13.7 13.2 12 12 10.1 12C8.10001 12 6.49999 13.1 5.89999 14.7C5.59999 15.3 6.19999 16 7.39999 16H13.3Z"
                                    fill="black" />
                            </svg>
                        </span>
                        <!--end::Svg Icon-->
                        <h2>Contact Details</h2>
                    </div>
                    <!--end::Card title-->
                </div>
                <!--end::Card header-->
                <!--begin::Card body-->
                <div class="card-body pt-5">
                    <div class="col-xl-12">
                        @include('backend.errors')
                        @include('backend.alerts')
                    </div>

                    <!--begin::Form-->
                    <form id="manage_form" class="form" action="{{ $action }}" enctype="multipart/form-data"
                        method="POST">
                        @if (!empty($data['id']))
                            @method('PUT')
                        @endif
                        @csrf
                        <!--begin::Input group-->
                        <div class="mb-7">
                            <!--begin::Label-->
                            <label class="fs-6 fw-bold mb-3">
                                <span>Profile Image</span>
                                <i class="fas fa-exclamation-circle ms-1 fs-7" data-bs-toggle="tooltip"
                                    title="Allowed file types: png, jpg, jpeg."></i>
                            </label>
                            <!--end::Label-->
                            <!--begin::Image input wrapper-->
                            <div class="form-group fv-row mb-7">
                                <div class="col-12">
                                    <input type="file" class="form-control" id="image" name="image"
                                         accept="image/jpeg,image/png,image/jpg" >
                                </div>
                            </div>
                            @if (isset($data['image']) && !empty($data['image']))
                                <div class="form-group fv-row mb-7">
                                    <label class="col-form-label col-3 text-lg-right text-left"></label>
                                    <div class="col-9">
                                        <a href="{{ asset('/uploads/directory_logs/' . $data['image']) }}"
                                            target="_blank"><img
                                                src="{{ asset('/uploads/directory_logs/' . $data['image']) }}"
                                                style="width: 100px;" /></a>
                                    </div>
                                </div>
                            @endif
                            <!--end::Image input wrapper-->
                        </div>
                        <br>
                        <br>
                        <!--end::Input group-->
                        <!--begin::Input group-->
                        <div class="row row-cols-1 row-cols-sm-2 rol-cols-md-1 row-cols-lg-2">
                            <!--begin::Col-->
                            <div class="col">
                                <!--begin::Input group-->
                                <div class="fv-row mb-7">
                                    <!--begin::Label-->
                                    <label class="fs-6 fw-bold form-label mt-3">
                                        <span class="required">First name</span>
                                        <i class="fas fa-exclamation-circle ms-1 fs-7" data-bs-toggle="tooltip"
                                            title="Enter the First name."></i>
                                    </label>
                                    <!--end::Label-->
                                    <!--begin::Input-->
                                    <input type="text" class="form-control form-control-solid required" name="first_name"
                                        value="{{ $data['first_name'] ?? old('first_name') }}" />
                                    <!--end::Input-->
                                </div>
                                <!--end::Input group-->
                            </div>
                            <!--end::Col-->
                            <!--begin::Col-->
                            <div class="col">
                                <!--begin::Input group-->
                                <div class="fv-row mb-7">
                                    <!--begin::Label-->
                                    <label class="fs-6 fw-bold form-label mt-3">
                                        <span>Last name</span>
                                        <i class="fas fa-exclamation-circle ms-1 fs-7" data-bs-toggle="tooltip"
                                            title="Enter the Last name ."></i>
                                    </label>
                                    <!--end::Label-->
                                    <!--begin::Input-->
                                    <input type="text" class="form-control form-control-solid required" name="last_name"
                                        value="{{ $data['last_name'] ?? old('last_name') }}" />
                                    <!--end::Input-->
                                </div>
                                <!--end::Input group-->
                            </div>
                            <!--end::Col-->
                        </div>
                        <!--end::Input group-->
                        <!--begin::Input group-->
                        <div class="fv-row mb-7">
                            <!--begin::Label-->
                            <label class="fs-6 fw-bold form-label mt-3">
                                <span>Email</span>
                                <i class="fas fa-exclamation-circle ms-1 fs-7" data-bs-toggle="tooltip"
                                    title="Enter the Email Address."></i>
                            </label>
                            <!--end::Label-->
                            <!--begin::Input-->
                            <input type="email" class="form-control form-control-solid required" name="email"
                                value="{{ $data['email'] ?? old('email') }}" />
                            <!--end::Input-->
                        </div>
                        <!--end::Input group-->
                        <!--begin::Input group-->
                        <div class="fv-row mb-7">
                            <!--begin::Label-->
                            <label class="fs-6 fw-bold form-label mt-3">
                                <span>Address</span>
                                <i class="fas fa-exclamation-circle ms-1 fs-7" data-bs-toggle="tooltip"
                                    title="Enter the Address (optional)."></i>
                            </label>
                            <!--end::Label-->
                            <!--begin::Input-->
                            <input type="text" class="form-control form-control-solid" name="address"
                                value="{{ $data['address'] ?? old('address') }}" />
                            <!--end::Input-->
                        </div>
                        <!--end::Input group-->
                        <!--begin::Row-->
                        <div class="row row-cols-1 row-cols-sm-2 rol-cols-md-1 row-cols-lg-2">
                            <!--begin::Col-->
                            <div class="col">
                                <!--begin::Input group-->
                                <div class="fv-row mb-7">
                                    <!--begin::Label-->
                                    <label class="fs-6 fw-bold form-label mt-3">
                                        <span class="required">Mobile phone</span>
                                        <i class="fas fa-exclamation-circle ms-1 fs-7" data-bs-toggle="tooltip"
                                            title="Enter the phone number."></i>
                                    </label>
                                    <!--end::Label-->
                                    <!--begin::Input-->
                                    <input type="text" class="form-control form-control-solid digits required"
                                        name="mobile_phone" value="{{ $data['mobile_phone'] ?? old('mobile_phone') }}" />
                                    <!--end::Input-->
                                </div>
                                <!--end::Input group-->
                            </div>
                            <!--end::Col-->
                            <!--begin::Col-->
                            <div class="col">
                                <div class="fv-row mb-7">
                                    <!--begin::Label-->
                                    <label class="fs-6 fw-bold form-label mt-3">
                                        <span class="required">User Contact Group</span>
                                    </label>
                                    <!--end::Label-->
                                    <div class="w-100">
                                        <div class="form-floating border rounded">
                                            <!--begin::Select2-->

                                            <select id="selected_user_groups"
                                                class="form-select form-select-solid lh-1 py-3" name="type">
                                                <option value="">Select</option>
                                                @foreach ($user_groups->pluck('id','name') ?? [] as $group => $id)
                                                <option value="{{ $id }}"
                                                {{ old( 'type', $data['type'] ?? '') == $id ? 'selected' : '' }}>
                                                        {{ $group }}</option>
                                                @endforeach
                                            </select>
                                            <!--end::Select2-->
                                        </div>
                                    </div>
                                </div>
                                <!--end::Col-->
                            </div>
                        </div>
                        <!--end::Row-->
                        <!--begin::Row-->
                        <div class="row row-cols-1 row-cols-sm-2 rol-cols-md-1 row-cols-lg-2">
                            <!--begin::Col-->
                            <div class="col">
                                <!--begin::Input group-->
                                <div class="fv-row mb-7">
                                    <!--begin::Label-->
                                    <label class="fs-6 fw-bold form-label mt-3">
                                        <span class="required">Visible in the app</span>
                                    </label>
                                    <!--end::Label-->
                                    <div class="w-100">
                                        <div class="form-floating border rounded">
                                            <!--begin::Select2-->
                                             <select id="kt_ecommerce_select2_country" class="form-select form-select-solid lh-1 py-3" name="visible_in_app" data-kt-ecommerce-settings-type="select2_flags" data-placeholder="Visible in the app">

                                                @foreach (config('constant.yes_no_list') as $key => $value)
                                                    <option value="{{ $key }}"
                                                        {{ old('visible_in_app', $data['visible_in_app'] ?? '') == $key ? 'selected' : '' }}>
                                                        {{ $value }}</option>
                                                @endforeach
                                            </select>
                                            <!--end::Select2-->
                                        </div>
                                    </div>
                                </div>
                                <!--end::Input group-->
                            </div>
                            <!--end::Col-->
                            <!--begin::Col-->
                            <div class="col">
                                <!--begin::Input group-->
                                <div class="fv-row mb-7">
                                    <!--begin::Label-->
                                    <label class="fs-6 fw-bold form-label mt-3">
                                        <span class="required">Visible to</span>
                                    </label>
                                    <!--end::Label-->
                                    <!--begin::Input-->
                                    <div class="w-100">
                                        <div class="form-floating border rounded">
                                            <!--begin::Select2-->
                                            <select id="visible_to" class="form-select form-select-solid lh-1 py-3"
                                                name="visible_to" data-kt-ecommerce-settings-type="select2_flags">
                                                <option value="all_user"

                                                    {{ old('visible_to', $data['visible_to'] ?? '') == 'all_user' ? 'selected' : '' }}>
                                                    All Users</option>
                                                <option value="selected_user"
                                                    {{  old('visible_to', $data['visible_to'] ?? '') == 'selected_user' ? 'selected' : '' }}>
                                                    Selected User</option>
                                                <option value="selected_user_group"
                                                    {{  old('visible_to', $data['visible_to'] ?? '')== 'selected_user_group' ? 'selected' : '' }}>
                                                    Selected User Group</option>
                                            </select>
                                            <!--end::Select2-->
                                        </div>
                                    </div>
                                </div>
                                <!--end::Input group-->
                                <!--begin::Input group for multi-select dropdown of users (visible only when "Selected User" is chosen)-->
                                <div class="fv-row mb-7" id="selected_user_dropdown">
                                    <!--begin::Label-->
                                    <label class="fs-6 fw-bold form-label mt-3">
                                        <span class="required">Select Users</span>
                                    </label>
                                    <!--end::Label-->
                                    <!--begin::Input-->
                                    <div class="w-100">
                                        <div class="form-floating border rounded">
                                            <select id="selected_users" class="form-select form-select-solid lh-1 py-3"
                                                name="selected_users[]" multiple>
                                                @foreach ($user_names ?? [] as $key => $value)
                                                    <option value="{{ $value['id'] }}"
                                                        {{ !empty($selectedUsers) && in_array($value['id'], $selectedUsers) ? 'selected' : '' }}>
                                                        {{ $value['first_name'] . ' ' . $value['last_name'] }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <!--end::Input group-->
                                <div class="fv-row mb-7" id="selected_user_group_dropdown">
                                    <!--begin::Label-->
                                    <label class="fs-6 fw-bold form-label mt-3">
                                        <span class="required">Select User Groups</span>
                                    </label>
                                    <!--end::Label-->
                                    <!--begin::Input-->
                                    <div class="w-100">
                                        <div class="form-floating border rounded">
                                            <select id="selected_user_groups"
                                                class="form-select form-select-solid lh-1 py-3"
                                                name="selected_user_groups[]" multiple>
                                                @foreach ($user_groups ?? [] as $group)
                                                    <option value="{{ $group->id }}"
                                                        {{ !empty($selectedGroups) && in_array($group->id, $selectedGroups) ? 'selected' : '' }}>
                                                        {{ $group->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <!--end::Input group-->
                            </div>
                            <!--end::Col-->
                        </div>
                        <!--end::Row-->
                        <!--begin::Input group-->
                        <div class="fv-row mb-7">
                            <!--begin::Label-->
                            <label class="fs-6 fw-bold form-label mt-3">
                                <span>Notes</span>
                                <i class="fas fa-exclamation-circle ms-1 fs-7" data-bs-toggle="tooltip"
                                    title="Notes (optional)."></i>
                            </label>
                            <!--end::Label-->
                            <!--begin::Input-->
                            <textarea class="form-control form-control-solid" name="notes">{{ $data['notes'] ?? old('notes') }}</textarea>
                            <!--end::Input-->
                        </div>
                        <!--end::Input group-->
                        <div class="separator mb-6"></div>
                        <div class="card-title">
                            <!--begin::Svg Icon | path: icons/duotune/communication/com005.svg-->
                            <!--end::Svg Icon-->
                            <h2>Emergency Contact Details</h2>
                        </div>
                        <br>
                        <!--begin::Input group-->
                        <div class="row row-cols-1 row-cols-sm-2 rol-cols-md-1 row-cols-lg-2">
                            <!--begin::Col-->
                            <div class="col">
                                <!--begin::Input group-->
                                <div class="fv-row mb-7">
                                    <!--begin::Label-->
                                    <label class="fs-6 fw-bold form-label mt-3">
                                        <span class="required">Emergency Contact Name</span>
                                        <i class="fas fa-exclamation-circle ms-1 fs-7" data-bs-toggle="tooltip"
                                            title="Enter the Emergency Contact Name."></i>
                                    </label>
                                    <!--end::Label-->
                                    <!--begin::Input-->

                                    <input type="text" class="form-control form-control-solid "
                                        name="emergency_contact_name"
                                        value="{{ $data['emergency_contact_name'] ?? old('emergency_contact_name') }}" />
                                    <!--end::Input-->
                                </div>
                                <!--end::Input group-->
                            </div>
                            <!--end::Col-->
                            <!--begin::Col-->
                            <div class="col">
                                <!--begin::Input group-->
                                <div class="fv-row mb-7">
                                    <!--begin::Label-->
                                    <label class="fs-6 fw-bold form-label mt-3">
                                        <span class="required">Emergency Contact Phone</span>
                                        <i class="fas fa-exclamation-circle ms-1 fs-7" data-bs-toggle="tooltip"
                                            title="Enter the Emergency phone number."></i>
                                    </label>
                                    <!--end::Label-->
                                    <!--begin::Input-->
                                    <input type="text" class="form-control form-control-solid digits "
                                        name="emergency_contact_number"
                                        value="{{ $data['emergency_contact_number'] ?? old('emergency_contact_number') }}" />
                                    <!--end::Input-->
                                </div>
                                <!--end::Input group-->
                            </div>
                            <!--end::Col-->
                        </div>
                        <!--end::Input group-->
                        <!--begin::Separator-->
                        <div class="separator mb-6"></div>
                        <!--end::Separator-->
                        <!--begin::Action buttons-->
                        <div class="d-flex justify-content-end">
                            <!--begin::Button-->
                            <a href="{{ route('directory.index') }}" class="btn btn-light me-3">Cancel</a>
                            <!--end::Button-->
                            <!--begin::Button-->
                            <button type="submit" onclick="$('#manage_form').submit();" class="btn btn-primary">
                                <span class="indicator-label">Save</span>
                                <span class="indicator-progress">Please wait...
                                    <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                            </button>
                            <!--end::Button-->
                        </div>
                        <!--end::Action buttons-->
                    </form>
                    <!--end::Form-->
                </div>
                <!--end::Card body-->
            </div>
            <!--end::Contacts-->
        </div>
        <!--end::Content-->
    </div>
    <!--end::Content-->
@endsection


@section('scripts')
    @include('backend.master.directory.comman_script')
@endsection