@extends('resident-domain.layout.master')
@section('content')
    @php
        $userType = \App\Helpers\Helpers::getUserRole()->type_id ?? [];
    @endphp

    <div class="page-heading-block py-4">
        <div class="page-title-block d-flex align-items-center justify-content-between">
            <h4 class="mb-0 font-weight-bold">Invite Visitors</h4>
        </div>
    </div>

    <div class="page-main-content py-4">
        <div class="add-visitor-form-block p-5 rounded">
            <form action="{{ route('resident.send-invite') }}" method="POST" class="row" id="invite-visitor-form"
                enctype="multipart/form-data">
                {{ csrf_field() }}
                <input type="hidden" name="menu" value="{{ $menu ?? '' }}">

                <div class="row">
                    <!-- Visitor Name -->
                    <div class="mb-3 col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12">
                        <label for="visitor-name" class="form-label">Visitor Name *</label>
                        <input type="text" class="form-control rounded required" name="visitor_name" id="visitor-name"
                            value="{{ old('visitor_name') ?? '' }}">
                    </div>

                    <!-- Visitor Mobile Number -->
                    <div class="mb-3 col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12">
                        <label for="mobile-number" class="form-label">Visitor Mobile Number *</label>
                        <div class="input-group">
                            <select name="country_code" id="country_code" class="form-select-sm rounded-start border-0"
                                style="width: 105px; outline:none; -webkit-appearance: none;
                                    -moz-appearance: none;"
                                disabled>
                                @if (!empty($country_codes))
                                    @foreach ($country_codes ?? [] as $country_code)
                                        <option value="{{ $country_code->code }}"
                                            {{ $country_code->shortName == 'SG' ? 'selected' : '' }}>
                                            {{ $country_code->shortName }} ({{ $country_code->code }})
                                        </option>
                                    @endforeach
                                @endif
                            </select>
                            <input type="text" class="form-control rounded-end required mobile_number"
                                name="mobile_number" id="mobile-number" value="{{ old('mobile_number') ?? '' }}">
                        </div>
                    </div>

                    <!-- Visitor Email -->
                    <div class="mb-3 col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12">
                        <label for="visitor-email" class="form-label">Visitor Email *</label>
                        <input type="text" class="form-control rounded required email" name="visitor_email"
                            id="visitor-email" value="{{ old('visitor_email') ?? '' }}">
                    </div>

                    <!-- Purpose -->
                    <div class="mb-3 col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12">
                        <label for="purpose" class="form-label">Purpose *</label>
                        <input type="text" name="purpose" id="purpose" class="form-control rounded required"
                            value="{{ old('purpose') ?? '' }}" maxlength="40">
                    </div>

                    <!-- Validity Date -->
                    <div class="mb-3 col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 responsive-date-time">
                        <label for="validity-date" class="form-label">Validity Date *</label>
                        <div class="d-flex justify-content-between date-time-block">
                            <input type="text" class="form-control rounded date-time required" name="validity_date"
                                id="validity-date">
                            <img src="{{ asset('assets/images/icons/calendar-dots_outline.svg') }}" alt=""
                                srcset="">
                        </div>
                    </div>

                    <input type="hidden" id="old-selected-date" value="{{ old('validity_date') }}">

                    <!-- Send Invite Via -->
                    <div class="mb-3 col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12">
                        <label for="">Send Invite Via</label>
                        <div class="d-flex flex-wrap align-items-start gap-2">
                            <div class="form-check">
                                <input type="radio" name="invite_type" id="email"
                                    class="form-check-input invite_type_button" value="1">
                                <label for="email" class="form-label invite_type_label">Email</label>
                            </div>
                            <div class="form-check">
                                <input type="radio" name="invite_type" id="whatsapp"
                                    class="form-check-input invite_type_button" value="2">
                                <label for="whatsapp" class="form-label invite_type_label">WhatsApp</label>
                            </div>
                            <div class="form-check">
                                <input type="radio" name="invite_type" id="both"
                                    class="form-check-input invite_type_button" value="3" checked>
                                <label for="both" class="form-label invite_type_label">Both</label>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Message -->
                <div class="mb-3 col-12">
                    <label for="message" class="form-label">Message</label>
                    <textarea name="message" id="message" class="form-control rounded" cols="0" rows="2">{{ old('message') ?? '' }}</textarea>
                </div>

                <!-- Submit Button -->
                <div class="d-flex justify-content-end w-100">
                    <button type="submit" class="btn form-submit-btn">Send Invite</button>
                </div>
            </form>
        </div>
    </div>

    <style>
        @media screen and (max-width:500px) {
            .sidebar {
                display: none !important;
            }

            .main-area {
                width: 100% !important;
                margin: 0 !important;
            }

            .content-area {
                padding-right: 1.5rem;
            }
        }

        @media screen and (max-width:764px) {

            .responsive-date-time {
                width: 100% !important;
            }
        }
    </style>

    @push('scripts')
        <script>
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': `{{ csrf_token() }}`
                }
            });
        </script>

        <script src="{{ asset('js/invite-visitor-page.js') }}"></script>
    @endPush
@endsection