@extends('admin.layout')

@section('content')
    <style>
        /* =========================================================
               PAGE HEADER
            ========================================================= */

        .page-header {
            background: linear-gradient(135deg, #C74A26, #C74A26);
            border-radius: 18px;
            padding: 28px 35px;
            color: #fff;
            margin-bottom: 25px;
        }

        .page-header h3 {
            color: #fff;
            font-weight: 700;
            margin-bottom: 5px;
        }

        .page-header p {
            margin: 0;
        }


        /* =========================================================
               CONTACT CARD
            ========================================================= */

        .contact-card {
            border: none;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 15px 35px rgba(0, .08);
        }

        .contact-card .card-header {
            border-bottom: 1px solid #eef2f7;
            padding: 22px 28px;
        }

        .contact-card .card-header h5 {
            margin: 0;
            font-weight: 700;
        }

        .contact-card .card-body {
            padding: 30px;
        }


        /* =========================================================
               FORM
            ========================================================= */

        .form-label {
            font-weight: 600;
            margin-bottom: 8px;
        }

        .input-group-text {
            width: 48px;
            justify-content: center;
        }

        .form-control,
        .form-control:focus,
        textarea.form-control {
            /* border-radius: 10px; */
            min-height: 48px;
            box-shadow: none;
        }

        textarea.form-control {
            resize: none;
            min-height: 100px;
        }

        .btn-save {
            border-radius: 10px;
            padding: 12px 30px;
            font-weight: 600;
        }

        .btn-back {
            border-radius: 10px;
            padding: 12px 25px;
            font-weight: 600;
        }

        .form-control:focus {
            border-color: #C74A26;
        }

        .required-star {
            color: #ea5455;
        }


        /* =========================================================
               ERROR
            ========================================================= */

        .text-danger {
            font-size: 13px;
        }

        .backend-error {
            display: block;
            margin-top: 5px;
        }
    </style>


    <div class="container-fluid mt-4">


        <!-- =========================================================
                 PAGE HEADER
            ========================================================== -->

        <div class="row align-items-center justify-content-between mb-3 mt-3">

            <div class="col-auto">

                <h5 class="mb-0">

                    <a href="{{ route('admin.contact_details') }}"
                        class="btn btn-icon bg-white me-2 d-inline-flex align-items-center justify-content-center"
                        style="box-shadow: 0px 9px 12px -2px #66328E1F;">

                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                            fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />

                            <path d="M15 6l-6 6l6 6" />

                        </svg>

                    </a>

                    Add Contact details

                </h5>

            </div>

        </div>


        <!-- =========================================================
                 CONTACT FORM
            ========================================================== -->

        <form id="contactForm" action="{{ route('store_contact') }}" method="POST">

            @csrf


            <div class="card contact-card">


                <!-- =====================================================
                         CARD HEADER
                    ====================================================== -->

                <div class="card-header">

                    <h5>

                        <i class="ti tabler-building me-2"></i>

                        Vehicle Consultancy Contact Details

                    </h5>

                </div>


                <!-- =====================================================
                         CARD BODY
                    ====================================================== -->

                <div class="card-body">

                    <div class="row">


                        <!-- =================================================
                                 DATE
                            ================================================== -->

                        <!-- <div class="col-md-6 mb-4">

                                <label class="form-label">

                                    Date

                                    <span class="required-star">*</span>

                                </label>


                                <div class="input-group">

                                    <span class="input-group-text">

                                        <i class="ti tabler-calendar"></i>

                                    </span>


                                    <input
                                        type="date"
                                        class="form-control"
                                        name="date"
                                        value="{{ old('date', date('Y-m-d')) }}"
                                        >

                                </div>


                                @error('date')
        <small class="text-danger backend-error">
                                                {{ $message }}
                                            </small>
    @enderror

                            </div> -->


                        <!-- =================================================
                                 MOBILE
                            ================================================== -->

                        <div class="col-md-6 mb-4">

                            <label class="form-label">

                                Mobile Number

                                <span class="required-star">*</span>

                            </label>


                            <div class="input-group">

                                <span class="input-group-text">

                                    <i class="ti tabler-device-mobile"></i>

                                </span>


                                <input type="text" class="form-control" name="mobile" placeholder="Enter mobile number"
                                    value="{{ old('mobile') }}" maxlength="10" minlength="10" inputmode="numeric">

                            </div>


                            @error('mobile')
                                <small class="text-danger backend-error">
                                    {{ $message }}
                                </small>
                            @enderror

                        </div>


                        <!-- =================================================
                                 EMAIL
                            ================================================== -->

                        <div class="col-md-6 mb-4">

                            <label class="form-label">

                                Email Address

                                <span class="required-star">*</span>

                            </label>


                            <div class="input-group">

                                <span class="input-group-text">

                                    <i class="ti tabler-mail"></i>

                                </span>


                                <input type="email" class="form-control" name="email" placeholder="Enter email address"
                                    value="{{ old('email') }}">

                            </div>


                            @error('email')
                                <small class="text-danger backend-error">
                                    {{ $message }}
                                </small>
                            @enderror

                        </div>


                        <!-- =================================================
                                 WORKING HOURS
                            ================================================== -->

                        <div class="col-md-6 mb-4">

                            <label class="form-label">

                                Working Hours

                                <span class="required-star">*</span>

                            </label>


                            <div class="input-group">

                                <span class="input-group-text">

                                    <i class="ti tabler-clock"></i>

                                </span>


                                <input type="text" class="form-control" name="working_hours"
                                    placeholder="Enter working hours" value="{{ old('working_hours') }}">

                            </div>


                            @error('working_hours')
                                <small class="text-danger backend-error">
                                    {{ $message }}
                                </small>
                            @enderror

                        </div>


                        <!-- =================================================
                                 INSTAGRAM
                            ================================================== -->

                        <div class="col-md-6 mb-4">

                            <label class="form-label">

                                Instagram

                                <small class="text-muted">
                                    (Optional)
                                </small>

                            </label>


                            <div class="input-group">

                                <span class="input-group-text">

                                    <i class="ti tabler-brand-instagram"></i>

                                </span>


                                <input type="url" class="form-control" name="instagram"
                                    placeholder="https://instagram.com/yourpage" value="{{ old('instagram') }}">

                            </div>


                            @error('instagram')
                                <small class="text-danger backend-error">
                                    {{ $message }}
                                </small>
                            @enderror

                        </div>


                        <!-- =================================================
                                 FACEBOOK
                            ================================================== -->

                        <div class="col-md-6 mb-4">

                            <label class="form-label">

                                Facebook

                                <small class="text-muted">
                                    (Optional)
                                </small>

                            </label>


                            <div class="input-group">

                                <span class="input-group-text">

                                    <i class="ti tabler-brand-facebook"></i>

                                </span>


                                <input type="url" class="form-control" name="facebook"
                                    placeholder="https://facebook.com/yourpage" value="{{ old('facebook') }}">

                            </div>


                            @error('facebook')
                                <small class="text-danger backend-error">
                                    {{ $message }}
                                </small>
                            @enderror

                        </div>


                        <!-- =================================================
                                 WHATSAPP
                            ================================================== -->

                        <div class="col-md-6 mb-4">

                            <label class="form-label">

                                WhatsApp

                                <small class="text-muted">
                                    (Optional)
                                </small>

                            </label>


                            <div class="input-group">

                                <span class="input-group-text">

                                    <i class="ti tabler-brand-whatsapp"></i>

                                </span>


                                <input type="url" class="form-control" name="whatsapp"
                                    placeholder="https://wa.me/919876543210" value="{{ old('whatsapp') }}">

                            </div>


                            @error('whatsapp')
                                <small class="text-danger backend-error">
                                    {{ $message }}
                                </small>
                            @enderror

                        </div>


                        <!-- =================================================
                                 YOUTUBE
                            ================================================== -->

                        <div class="col-md-6 mb-4">

                            <label class="form-label">

                                YouTube

                                <small class="text-muted">
                                    (Optional)
                                </small>

                            </label>


                            <div class="input-group">

                                <span class="input-group-text">

                                    <i class="ti tabler-brand-youtube"></i>

                                </span>


                                <input type="url" class="form-control" name="youtube"
                                    placeholder="https://youtube.com/@yourchannel" value="{{ old('youtube') }}">

                            </div>


                            @error('youtube')
                                <small class="text-danger backend-error">
                                    {{ $message }}
                                </small>
                            @enderror

                        </div>


                        <!-- =================================================
                                 ADDRESS
                            ================================================== -->

                        <div class="col-12 col-md-6 mb-4">
                            <label class="form-label">

                                Address

                                <span class="required-star">*</span>

                            </label>


                            <div class="input-group">

                                <span class="input-group-text align-items-start pt-3">

                                    <i class="ti tabler-map-pin"></i>

                                </span>


                                <textarea class="form-control" name="address" placeholder="Enter complete vehicle consultancy address">{{ old('address') }}</textarea>

                            </div>


                            @error('address')
                                <small class="text-danger backend-error">
                                    {{ $message }}
                                </small>
                            @enderror

                        </div>

                    </div>

                </div>


                <!-- =====================================================
                         BUTTONS
                    ====================================================== -->

                <div class="border-top text-center py-3 px-4 d-flex justify-content-center gap-2 flex-wrap">

                    <!-- BACK -->
                    <a href="{{ route('admin.contact_details') }}" class="btn btn-secondary btn-back">
                        <i class="ti tabler-arrow-left me-1"></i>
                        Back
                    </a>

                    <!-- SAVE -->
                    <button type="submit" id="saveContactBtn" class="btn btn-primary btn-save">
                        <i class="ti tabler-device-floppy me-1"></i>
                        Save Contact Details
                    </button>

                </div>

            </div>

        </form>

    </div>


    <!-- =========================================================
             FORM SCRIPT
        ========================================================== -->

    <script>
        document.addEventListener('DOMContentLoaded', function() {


            /* =================================================
               CONTACT FORM
            ================================================== */

            const contactForm =
                document.getElementById('contactForm');


            const saveContactBtn =
                document.getElementById('saveContactBtn');


            if (
                contactForm &&
                saveContactBtn
            ) {


                contactForm.addEventListener(
                    'submit',
                    function(e) {


                        /* =====================================
                           PREVENT DUPLICATE SUBMIT
                        ====================================== */

                        if (
                            contactForm.getAttribute(
                                'data-processing'
                            ) === 'true'
                        ) {

                            e.preventDefault();

                            return;

                        }


                        /* =====================================
                           BROWSER VALIDATION
                        ====================================== */

                        if (
                            !contactForm.checkValidity()
                        ) {

                            e.preventDefault();

                            contactForm.reportValidity();

                            return;

                        }


                        /* =====================================
                           PROCESSING
                        ====================================== */

                        contactForm.setAttribute(
                            'data-processing',
                            'true'
                        );


                        /* =====================================
                           DISABLE BUTTON
                        ====================================== */

                        saveContactBtn.disabled = true;


                        /* =====================================
                           LOADING
                        ====================================== */

                        saveContactBtn.innerHTML = `

                    <span
                        class="spinner-border spinner-border-sm me-1"
                        role="status"
                        aria-hidden="true">
                    </span>

                    Processing...

                `;

                    }
                );

            }


            /* =================================================
               MOBILE NUMBER
            ================================================== */

            const mobileInput =
                document.querySelector(
                    '[name="mobile"]'
                );


            if (mobileInput) {

                mobileInput.addEventListener(
                    'input',
                    function() {

                        this.value = this.value
                            .replace(
                                /[^0-9]/g,
                                ''
                            )
                            .slice(
                                0,
                                10
                            );

                    }
                );

            }


            /* =================================================
               REMOVE BACKEND ERROR WHEN FIELD IS FILLED
            ================================================== */

            document.querySelectorAll(
                '#contactForm input, #contactForm textarea, #contactForm select'
            ).forEach(function(field) {


                /* =============================================
                   INPUT EVENT
                ============================================== */

                field.addEventListener(
                    'input',
                    function() {

                        removeBackendError(this);

                    }
                );


                /* =============================================
                   CHANGE EVENT
                ============================================== */

                field.addEventListener(
                    'change',
                    function() {

                        removeBackendError(this);

                    }
                );

            });


            /* =================================================
               REMOVE ERROR FUNCTION
            ================================================== */

            function removeBackendError(field) {

                /*
                 * Find the nearest form field wrapper.
                 * This keeps the existing HTML/design unchanged.
                 */

                const wrapper =
                    field.closest('.col-md-6, .col-12');


                if (!wrapper) {
                    return;
                }


                /*
                 * Find backend validation error
                 * inside the same field wrapper.
                 */

                const error =
                    wrapper.querySelector(
                        '.backend-error'
                    );


                /*
                 * Remove error only when
                 * the field contains a value.
                 */

                if (
                    error &&
                    field.value.trim() !== ''
                ) {

                    error.remove();

                }

            }

        });
    </script>
@endsection