@extends('website.layouts.app')

@section('content')
    <!-- --------------------- BANNER ~ STARTS ------------- -->
    <section class="sub-banner d-block d-md-block" style="background-image: url({{ $setting->banner }});">
    </section>
    <!-- --------------------- BANNER ~ ENDS ------------- -->


    <!-- --------------------- FORM AREA ~ STARTS ------------- -->
    <section class="cme-details pb-lg-5 pb-5">
        <div class="container">

            <div class="custom-form mt-5 p-lg-5 p-3 py-lg-5 py-4 @if ($setting->available_slots <= $setting->booked_slots) reg-closed @endif">

                @if ($setting->available_slots <= $setting->booked_slots)
                    Registration Closed - START 
                    <div class="overlay">
                        <div class="overlay-text">
                            <p>Slots are full.</p>
                            <p>Registration Complete.</p>
                        </div>
                    </div>
                    Registration Closed - END 
                @endif

                <h2 class="mb-5 cme-heading text-center">CME Registration Form</h2>
                <form action="{{ route('form.submit') }}" method="POST" id="cme_form">
                    @csrf
                    <div class="row mb-3">
                        <div class="col-12 col-md-6 mb-4">
                            <label for="name" class="form-label required">Name</label>
                            <input type="text" class="form-control" id="name" name="name"
                                placeholder="Enter Name" required value="{{ old('name') }}">
                            @if ($errors->has('name'))
                                <span class="text-danger">{{ $errors->first('name') }}</span>
                            @endif
                        </div>
                        <div class="col-12 col-md-6 mb-4">
                            <label for="q_id" class="form-label required">QID Number</label>
                            <input type="text" class="form-control" id="q_id" name="q_id"
                                placeholder="Enter QID Number" required value="{{ old('q_id') }}">
                            @if ($errors->has('q_id'))
                                <span class="text-danger">{{ $errors->first('q_id') }}</span>
                            @endif
                        </div>
                        <div class="col-12 col-md-6 mb-4">
                            <label class="form-label">Are you Naseem Staff ? <span class="required-star">*</span></label>
                            <div class="border p-3 rounded radio-box">
                                <div class="me-2">
                                    <input type="radio" class="custom-radio" name="employee_status" id="employee_yes"
                                        value="yes" required @if (old('employee_status') == 'yes') checked @endif>
                                    <label class="form-check-label" for="employee_yes">Yes</label>
                                </div>
                                <div>
                                    <input type="radio" class="custom-radio" name="employee_status" id="employee_no"
                                        value="no" required @if (old('employee_status') != 'yes') checked @endif>
                                    <label class="form-check-label" for="employee_no">No</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-md-6 mb-4" id="employeeIdField"
                            @if (old('employee_status') == 'yes') style="display: none;" @endif>
                            <label for="employee_id" class="form-label">Employee ID for Naseem Staff</label>
                            <input type="text" class="form-control" id="employee_id" name="employee_id"
                                placeholder="Enter Employee ID" value="{{ old('employee_id') }}">
                            @if ($errors->has('employee_id'))
                                <span class="text-danger">{{ $errors->first('employee_id') }}</span>
                            @endif
                        </div>
                        <div class="col-12 col-md-6 mb-4">
                            <label for="phone" class="form-label required">Phone Number</label>
                            <input type="number" class="form-control" id="phone" name="phone"
                                placeholder="Enter Phone Number" required value="{{ old('phone') }}">
                            @if ($errors->has('phone'))
                                <span class="text-danger">{{ $errors->first('phone') }}</span>
                            @endif
                        </div>

                        <div class="col-12 col-md-6 mb-4">
                            <label for="email" class="form-label required">Email ID</label>
                            <input type="email" class="form-control" id="email" name="email"
                                placeholder="Enter Email ID" required value="{{ old('email') }}">
                            @if ($errors->has('email'))
                                <span class="text-danger">{{ $errors->first('email') }}</span>
                            @endif
                        </div>
                        <div class="col-12 col-md-6 mb-4">
                            <label for="license_no" class="form-label required">License Number</label>
                            <input type="text" class="form-control" id="license_no" name="license_no"
                                placeholder="Enter License Number" required value="{{ old('license_no') }}">
                            @if ($errors->has('license_no'))
                                <span class="text-danger">{{ $errors->first('license_no') }}</span>
                            @endif
                        </div>

                        <div class="col-12 col-md-6 mb-4">
                            <label for="designation" class="form-label">Designation</label>
                            <input type="text" class="form-control" id="designation" name="designation"
                                placeholder="Enter Designation" value="{{ old('designation') }}">
                            @if ($errors->has('designation'))
                                <span class="text-danger">{{ $errors->first('designation') }}</span>
                            @endif
                        </div>
                        <div class="col-12 col-md-6 mb-4" id="institutionField"
                            @if (old('employee_status') == 'yes') style="display: none;" @endif>
                            <label for="institution" class="form-label">Name of Institution</label>
                            <input type="text" class="form-control" id="institution" name="institution"
                                placeholder="Enter Name of Institution" value="{{ old('institution') }}">
                            @if ($errors->has('institution'))
                                <span class="text-danger">{{ $errors->first('institution') }}</span>
                            @endif
                        </div>
                    </div>

                    <button type="submit" class="btn btn-custom me-2 contact-form-submit submit-btn mt-2">
                        <span class="button__text">Submit</span>
                    </button>
                </form>
                <p class="note mt-4"><span class="required-star"></span> Note :</p>
                <p class="p-mt"><span class="required-star">*</span> Indicates mandatory fields</p>
                @if ($errors->any())
                    <div class="alert alert-danger mt-2">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
            </div>


            <!--Terms & Conditions  ~  Starts -->
            <div class="term-box mt-4">
                <div class="col-lg-12 d-flex">
                    <div class="fw-h3">
                        <h3 class="">
                            Terms &amp; Conditions
                        </h3>
                        {!! $setting->terms_conditions !!}
                    </div>
                </div>
                <!--Terms & Conditions  ~  End -->



            </div>
        </div>
    </section>

    <!-- --------------------- FORM AREA ~ ENDS ------------- -->


    </main>
@endsection
@section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"></script>

    <!-- yes or no  -->
    <script>
        $(document).on("change", "#employee_yes, #employee_no", function() {
            checkEmployeeStatus();
        });

        $(document).on("input change", "#employee_id, #q_id", function() {

            var q_id = $("#q_id").val();
            var employee_id = $("#employee_id").val();

            if (q_id != "" && employee_id != "") {
                $.ajax({
                    type: "POST",
                    url: "{{ route('employee.get') }}",
                    data: {
                        "_token": "{{ csrf_token() }}",
                        "q_id": q_id,
                        "employee_id": employee_id
                    },
                    success: function(response) {

                        if (response.data && response.status == "success") {
                            $("#phone").val(response.data.phone);
                            $("#email").val(response.data.email);
                            // $("#license_no").val(response.data.license_no);
                            $("#designation").val(response.data.designation);
                            $("#institution").val("Naseem");
                        } else {
                            $("#phone").val('');
                            $("#email").val('');
                            // $("#license_no").val('');
                            $("#designation").val('');
                        }
                    }
                });
            }
        });
    </script>
    <!-- yes or no  -->



    <script>
        var s_message = "{{ session('success') }}";
        var e_message = "{{ session('error') }}";
        var errors = "{{ session('errors') }}";

        $(document).ready(function() {
            checkEmployeeStatus();
            if (s_message)
                Swal.fire({
                    text: s_message,
                    type: 'success',
                    confirmButtonText: 'Ok',
                    confirmButtonColor: "rgb(174,46,184)"

                });
            if (e_message)
                Swal.fire({
                    text: e_message,
                    type: 'error',
                    confirmButtonText: 'Ok',
                    confirmButtonColor: "rgb(174,46,184)"

                });
            if (errors) {
                var input = document.getElementById("name").focus();
            }
        });

        $("#name").keyup(function() {
            $("#name").val($("#name").val().substr(0, 50));
        });
        $("#phone").keyup(function() {
            $("#phone").val($("#phone").val().substr(0, 13));
        });
        $("#q_id").keyup(function() {
            $("#q_id").val($("#q_id").val().substr(0, 11));
        });

        function checkEmployeeStatus() {
            if ($("#employee_yes").is(":checked")) {
                $('#employeeIdField').show();
                $("#employee_id").val('');
                $("#phone").val('');
                $("#email").val('');
                // $("#license_no").val('');
                $("#designation").val('');
                $("#phone").attr("readonly", true);
                // $("#email").attr("readonly",true);
                // $("#license_no").attr("readonly",true);
                // $("#designation").attr("readonly",true);
                $("#institutionField").hide();
            } else {
                $('#employeeIdField').hide();
                $("#employee_id").val('');
                $("#phone").val('');
                $("#email").val('');
                // $("#license_no").val('');
                $("#designation").val('');
                $("#phone").attr("readonly", false);
                // $("#email").attr("readonly",false);
                // $("#license_no").attr("readonly",false);
                // $("#designation").attr("readonly",false);
                $("#institutionField").show();
                $("#institution").val("");
            }
        }
    </script>

    <!-- Country Flag - Phone Start -->
    <script>
        var iti = $("#phone").intlTelInput({
            initialCountry: "qa",
            separateDialCode: true
        });


        // Handle form submission
        $("#cme_form").on("submit", function(e) {
            e.preventDefault();

            // Get the full phone number
            var phone_number = iti.intlTelInput("getNumber");

            // Log or process the full number
            console.log("Full Phone Number: ", phone_number);

            // Append to the form as a hidden input
            $("<input>").attr({
                type: "hidden",
                name: "phone_number",
                value: phone_number
            }).appendTo("#cme_form");

            // Submit the form
            this.submit();
        });
    </script>
@endsection