@extends('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('residents.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">
                    <div class="mb-3 col-4">
                        <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>

                    <div class="mb-3 col-4">
                        <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>

                    <div class="mb-3 col-4">
                        <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>

                    <div class="mb-3 col-4">
                        <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">
                        {{-- <textarea name="purpose" id="purpose" class="form-control rounded" cols="0" rows="2">{{ old('purpose') ?? '' }}</textarea> --}}
                    </div>

                    <div class="mb-3 col-4 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>

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


                <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>



                {{-- <div class="mb-3 d-grid ">
                    <label class="form-label">Attach (PNG, JPEG)</label>
                    <input type="file" class="attachment-input" name="attachment" id="attachment"
                        accept="image/png, image/jpeg" />
                    <label for="attachment" class="attachment-label">
                        <div id="img-preview">
                            <img src="{{ asset('assets/images/add-attachment-icon.svg') }}" alt="">
                        </div>
                    </label>
                </div> --}}
                <div class="d-flex justify-content-end ">
                    <a href="{{ url()->previous() }}" class="btn form-cancel-btn mx-3">Cancel</a>
                    <button type="submit" class="btn form-submit-btn">Send Invite</button>
                </div>
            </form>
        </div>
    </div>
    @push('scripts')
        <!-- Add Splide Script-->
        <script>
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': `{{ csrf_token() }}`
                }
            });
        </script>

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