@extends('app')
@section('content')
    @if (Session::has('flash_message'))
        <div class="alert {{ Session::has('flash_message_status') ? 'alert-error' : 'alert-success' }}">
            <button class="close" data-dismiss="alert"></button>
            {!! Session::get('flash_message') !!}
        </div>
    @endif
    @if ($errors->any())
        <div class="row">
            <div class="alert alert-error col-md-6 col-sm-12 col-md-offset-3">
                <button data-dismiss="alert" class="close"></button>
                @foreach ($errors->all() as $error)
                    <p>{{ $error }}</p>
                @endforeach
            </div>
        </div>
    @endif

    <style type="text/css">
        .label-b {
            display: inline;
        }
    </style>

    <div class="row">
        <div class="col-md-12">
            <div class="grid simple">

                <ul id="tab-01" class="nav nav-tabs"
                    style="width:250px;margin:auto;background-color: transparent;display: -webkit-box;">
                    <li id="archives" class="{{ $tab == 'Private' ? 'active' : '' }}"><a name="Private" id="private"
                            href="#Private"><span class="semi-bold">معلومات الإتصال للمسجلين</span></a></li>
                    <li id="requests" class="{{ $tab == 'Guest' ? 'active' : '' }}"><a name="Guest" id="guest"
                            href="#Guest"><span class="semi-bold">معلومات الإتصال للضيوف</span></a></li>
                </ul>

                <div class="tab-content" style="padding: 0px !important;">
                    {{-- Guest Contact Form --}}
                    <div id="Guest" class="tab-pane {{ $tab == 'Guest' ? 'active' : '' }}"
                        style="padding: 0px !important;">

                        <div class="grid simple" style="margin-bottom: 0px !important;">

                            <div class="grid-body"> <br>
                                <form action="{{ route('admin.committeeContacts.store') }}" method="POST" id="guestForm">
                                    @csrf
                                    <input type="hidden" id="contact_type" name="contact_type" value="Guest">

                                    <div class="form-group row">
                                        <div class="right col-md-3 col-md-offset-3 col-sm-12">
                                            <span class="help-block" style="margin-bottom: -16px; margin-top:2px">
                                                <span id="char_desc_email_guest">30</span> الحروف المتبقية
                                            </span>
                                        </div>
                                        <div class="right col-md-3 col-md-offset-6 col-sm-12">
                                            <input type="email" name="email" id="email_guest" class="form-control"
                                                pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9-]+\.[a-zA-Z]{2,}$"
                                                title="صيغة البريد الإلكتروني غير صحيحة (example@email.com)"
                                                value="{{ old('email', $guest->email ?? '') }}">
                                        </div>
                                        <div class="col-md-2 col-sm-12 text-left">
                                            <label for="email" class="label-b">البريد الإلكتروني</label>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <div class="radio-group inline col-md-3 col-md-offset-6 col-sm-12">
                                            <div class="radio">
                                                <input type="radio" name="email_radio" id="Yes_email" value="Yes_email"
                                                    {{ isset($guest) ? ($guest->show_email == 'Yes' ? 'checked' : '') : 'checked' }}>
                                                <label class="label-b" for="Yes_email">نعم</label>

                                                <input type="radio" name="email_radio" id="No_email" value="No_email"
                                                    {{ isset($guest) ? ($guest->show_email == 'No' ? 'checked' : '') : '' }}>
                                                <label class="label-b" for="No_email">لا</label>
                                            </div>
                                        </div>
                                        <div class="col-md-1 col-sm-12 text-left">
                                            <label for="email_radio" class="label-b">خاصية الظهور</label>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <div class="right col-md-3 col-md-offset-3 col-sm-12">
                                            <span class="help-block" style="margin-bottom: -16px; margin-top:2px">
                                                <span id="char_desc_phone_guest">15</span> الحروف المتبقية
                                            </span>
                                        </div>
                                        <div class="right col-md-3 col-md-offset-6 col-sm-12">
                                            <input type="text" name="phone" id="phone_guest" class="form-control"
                                                value="{{ old('phone', $guest->phone ?? '') }}">
                                        </div>
                                        <div class="col-md-1 col-sm-12 text-left">
                                            <label for="phone" class="label-b">الهاتف</label>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <div class="radio-group inline col-md-3 col-md-offset-6 col-sm-12">
                                            <div class="radio">
                                                <input type="radio" name="phone_radio" id="Yes_phone" value="Yes_phone"
                                                    {{ isset($guest) ? ($guest->show_phone == 'Yes' ? 'checked' : '') : 'checked' }}>
                                                <label class="label-b" for="Yes_phone">نعم</label>

                                                <input type="radio" name="phone_radio" id="No_phone" value="No_phone"
                                                    {{ isset($guest) ? ($guest->show_phone == 'No' ? 'checked' : '') : '' }}>
                                                <label class="label-b" for="No_phone">لا</label>
                                            </div>
                                        </div>
                                        <div class="col-md-1 col-sm-12 text-left">
                                            <label for="phone_radio" class="label-b">خاصية الظهور</label>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <div class="right col-md-3 col-md-offset-3 col-sm-12">
                                            <span class="help-block" style="margin-bottom: -16px; margin-top:2px">
                                                <span id="char_desc_instant_message_guest">15</span> الحروف المتبقية
                                            </span>
                                        </div>
                                        <div class="right col-md-3 col-md-offset-6 col-sm-12">
                                            <input type="text" name="instant_messaging" id="instant_message_guest"
                                                class="form-control"
                                                value="{{ old('instant_messaging', $guest->instant_messaging ?? '') }}">
                                        </div>
                                        <div class="col-md-2 col-sm-12 text-left">
                                            <label for="instant_message_guest" class="label-b">الرسائل</label>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <div class="radio-group inline col-md-3 col-md-offset-6 col-sm-12">
                                            <div class="radio">
                                                <input type="radio" name="instant_messaging_radio"
                                                    id="Yes_instant_messaging" value="Yes_instant_messaging"
                                                    {{ isset($guest) ? ($guest->show_instant_messaging == 'Yes' ? 'checked' : '') : '' }}>
                                                <label class="label-b" for="Yes_instant_messaging">نعم</label>

                                                <input type="radio" name="instant_messaging_radio"
                                                    id="No_instant_messaging" value="No_instant_messaging"
                                                    {{ isset($guest) ? ($guest->show_instant_messaging == 'No' ? 'checked' : '') : 'checked' }}>
                                                <label class="label-b" for="No_instant_messaging">لا</label>
                                            </div>
                                        </div>
                                        <div class="col-md-1 col-sm-12 text-left">
                                            <label for="instant_messaging_radio" class="label-b">خاصية الظهور</label>
                                        </div>
                                    </div>

                                    @if (Auth::user()->can('committeeContacts-create') || Auth::user()->can('committeeContacts-edit'))
                                        <div class="form-actions">
                                            <div class="pull-right markaction">
                                                <button type="submit" class="btn btn-primary pull-right"
                                                    id="btn-submit">حفظ</button>
                                            </div>
                                        </div>
                                    @endif
                                </form>

                            </div>
                        </div>

                    </div>

                    {{-- Private Contact Form --}}
                    <div id="Private" class="tab-pane {{ $tab == 'Private' ? 'active' : '' }}"
                        style="padding: 0px !important;">
                        <div class="grid simple" style="margin-bottom: 0px !important;">
                            <div class="grid-body"> <br>
                                <form action="{{ route('admin.committeeContacts.store') }}" method="POST"
                                    id="privateForm">
                                    @csrf
                                    <input type="hidden" id="contact_type" name="contact_type" value="Private">

                                    <div class="form-group row">
                                        <div class="right col-md-3 col-md-offset-3 col-sm-12">
                                            <span class="help-block" style="margin-bottom: -16px; margin-top:2px">
                                                <span id="char_desc_email_private">30</span> الحروف المتبقية
                                            </span>
                                        </div>
                                        <div class="right col-md-3 col-sm-12">
                                            <input type="email" name="email" id="email_private" class="form-control"
                                                value="{{ old('email', $private->email ?? '') }}">
                                        </div>
                                        <div class="col-md-2 col-sm-12 text-left">
                                            <label for="email" class="label-b">البريد الإلكتروني</label>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <div class="radio-group inline col-md-3 col-md-offset-6 col-sm-12">
                                            <div class="radio">
                                                <input type="radio" name="email_radio_p" id="Yes_email_p"
                                                    value="Yes_email"
                                                    {{ isset($private) ? ($private->show_email == 'Yes' ? 'checked' : '') : 'checked' }}>
                                                <label class="label-b" for="Yes_email_p">نعم</label>

                                                <input type="radio" name="email_radio_p" id="No_email_p"
                                                    value="No_email"
                                                    {{ isset($private) ? ($private->show_email == 'No' ? 'checked' : '') : '' }}>
                                                <label class="label-b" for="No_email_p">لا</label>
                                            </div>
                                        </div>
                                        <div class="col-md-1 col-sm-12 text-left">
                                            <label for="email_radio_p" class="label-b">خاصية الظهور</label>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <div class="right col-md-3 col-md-offset-3 col-sm-12">
                                            <span class="help-block" style="margin-bottom: -16px; margin-top:2px">
                                                <span id="char_desc_phone_private">15</span> الحروف المتبقية
                                            </span>
                                        </div>
                                        <div class="right col-md-3 col-sm-12">
                                            <input type="text" name="phone" id="phone_private" class="form-control"
                                                value="{{ old('phone', $private->phone ?? '') }}">
                                        </div>
                                        <div class="col-md-1 col-sm-12 text-left">
                                            <label for="phone" class="label-b">الهاتف</label>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <div class="radio-group inline col-md-3 col-md-offset-6 col-sm-12">
                                            <div class="radio">
                                                <input type="radio" name="phone_radio_p" id="Yes_phone_p"
                                                    value="Yes_phone"
                                                    {{ isset($private) ? ($private->show_phone == 'Yes' ? 'checked' : '') : 'checked' }}>
                                                <label class="label-b" for="Yes_phone_p">نعم</label>

                                                <input type="radio" name="phone_radio_p" id="No_phone_p"
                                                    value="No_phone"
                                                    {{ isset($private) ? ($private->show_phone == 'No' ? 'checked' : '') : '' }}>
                                                <label class="label-b" for="No_phone_p">لا</label>
                                            </div>
                                        </div>
                                        <div class="col-md-1 col-sm-12 text-left">
                                            <label for="phone_radio_p" class="label-b">خاصية الظهور</label>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <div class="right col-md-3 col-md-offset-3 col-sm-12">
                                            <span class="help-block" style="margin-bottom: -16px; margin-top:2px">
                                                <span id="char_desc_instant_message_private">15</span> الحروف المتبقية
                                            </span>
                                        </div>
                                        <div class="right col-md-3 col-sm-12">
                                            <input type="text" name="instant_messaging" id="instant_message_private"
                                                class="form-control"
                                                value="{{ old('instant_messaging', $private->instant_messaging ?? '') }}">
                                        </div>
                                        <div class="col-md-2 col-sm-12 text-left">
                                            <label for="instant_message_private" class="label-b">الرسائل</label>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <div class="radio-group inline col-md-3 col-md-offset-6 col-sm-12">
                                            <div class="radio">
                                                <input type="radio" name="instant_messaging_radio_p"
                                                    id="Yes_instant_messaging_p" value="Yes_instant_messaging"
                                                    {{ isset($private) ? ($private->show_instant_messaging == 'Yes' ? 'checked' : '') : '' }}>
                                                <label class="label-b" for="Yes_instant_messaging_p">نعم</label>

                                                <input type="radio" name="instant_messaging_radio_p"
                                                    id="No_instant_messaging_p" value="No_instant_messaging"
                                                    {{ isset($private) ? ($private->show_instant_messaging == 'No' ? 'checked' : '') : 'checked' }}>
                                                <label class="label-b" for="No_instant_messaging_p">لا</label>
                                            </div>
                                        </div>
                                        <div class="col-md-1 col-sm-12 text-left">
                                            <label for="instant_messaging_radio_p" class="label-b">خاصية الظهور</label>
                                        </div>
                                    </div>

                                    @if (Auth::user()->can('committeeContacts-create') || Auth::user()->can('committeeContacts-edit'))
                                        <div class="form-actions">
                                            <div class="pull-right markaction">
                                                <button type="submit" class="btn btn-primary pull-right"
                                                    id="btn-submit">حفظ</button>
                                            </div>
                                        </div>
                                    @endif
                                </form>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('page_script')
    <script type="text/javascript" language="javascript" class="init">
        function isValidEmail(email) {
            // Regex: text@text.text (at least 2 letters in TLD)
            const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
            return regex.test(email);
        }
        $('#phone_private').on('input', function() {
            this.value = this.value.replace(/[^0-9]/g, '');
        });
        $('#instant_message_guest').on('input', function() {
            this.value = this.value.replace(/[^0-9]/g, '');
        });

        $('#phone_guest').on('input', function() {
            this.value = this.value.replace(/[^0-9]/g, '');
        });
        $('#instant_message_private').on('input', function() {
            this.value = this.value.replace(/[^0-9]/g, '');
        });


        $('#guest').click(function() {
            var name = $(this).attr('name');
            $('#contact_type').val(name);
            //alert(name);
        });
        $('#private').click(function() {
            var name = $(this).attr('name');
            $('#contact_type').val(name);
            //alert(name);
        });

        $("#email_private").keyup(function(event) {
            updateFeatureCharLimitNum('email_private', 'char_desc_email_private', 30);
        });

        $("#email_guest").keyup(function(event) {
            updateFeatureCharLimitNum('email_guest', 'char_desc_email_guest', 30);
        });

        $("#phone_guest").keyup(function(event) {
            updateFeatureCharLimitNum('phone_guest', 'char_desc_phone_guest', 15);
        });

        $("#phone_private").keyup(function(event) {
            updateFeatureCharLimitNum('phone_private', 'char_desc_phone_private', 15);
        });

        $("#instant_message_guest").keyup(function(event) {
            updateFeatureCharLimitNum('instant_message_guest', 'char_desc_instant_message_guest', 15);
        });

        $("#instant_message_private").keyup(function(event) {
            updateFeatureCharLimitNum('instant_message_private', 'char_desc_instant_message_private', 15);
        });

        updateFeatureCharLimitNum('email_private', 'char_desc_email_private', 30);
        updateFeatureCharLimitNum('email_guest', 'char_desc_email_guest', 30);
        updateFeatureCharLimitNum('phone_private', 'char_desc_phone_private', 15);
        updateFeatureCharLimitNum('phone_guest', 'char_desc_phone_guest', 15);
        updateFeatureCharLimitNum('instant_message_private', 'char_desc_instant_message_private', 15);
        updateFeatureCharLimitNum('instant_message_guest', 'char_desc_instant_message_guest', 15);

        function updateFeatureCharLimitNum(textarea, limitElement, limitNum) {
            var field = document.getElementById(textarea);

            if (field.value.length > limitNum) {
                field.value = field.value.substring(0, limitNum);
            } else {
                $('#' + limitElement).html(limitNum - field.value.length);
            }
        }


        jQuery('#form_editpublish').submit(function(event) {
            var pass = true;
            //some validations
            alert('ad');
            if (pass == false) {
                return false;
            }
            form = this;
            jQuery('#btn-submit').attr('disabled', 'disabled');
            event.preventDefault();
            setTimeout(function() {
                form.submit();
            }, 500);
            jQuery('#progressbar').show();

            return true;
        });
        const guestForm = document.getElementById('guestForm');
        const privateForm = document.getElementById('privateForm');

        function validateForm(form, emailFieldId) {
            const emailInput = document.getElementById(emailFieldId);
            if (!isValidEmail(emailInput.value.trim())) {
                alert('صيغة البريد الإلكتروني غير صحيحة. مثال: example@email.com');
                emailInput.focus();
                return false;
            }
            return true;
        }

        guestForm.addEventListener('submit', function(e) {
            if (!validateForm(guestForm, 'email_guest')) {
                e.preventDefault();
            }
        });

        privateForm.addEventListener('submit', function(e) {
            if (!validateForm(privateForm, 'email_private')) {
                e.preventDefault();
            }
        });
    </script>
@endsection