@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, 0, 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;
        }

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

                    Edit Contact details

                </h5>

            </div>

        </div>


        <!-- =========================================================
             SUCCESS MESSAGE
        ========================================================== -->

        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">

                <i class="ti tabler-circle-check me-1"></i>

                {{ session('success') }}

                <button type="button" class="btn-close" data-bs-dismiss="alert">
                </button>

            </div>
        @endif


        <!-- =========================================================
             ERROR MESSAGE
        ========================================================== -->

        @if (session('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">

                <i class="ti tabler-alert-circle me-1"></i>

                {{ session('error') }}

                <button type="button" class="btn-close" data-bs-dismiss="alert">
                </button>

            </div>
        @endif


        <!-- =========================================================
             VALIDATION ERRORS
        ========================================================== -->

        @if ($errors->any())
            <div class="alert alert-danger alert-dismissible fade show" role="alert">

                <strong>Please fix the following errors:</strong>

                <ul class="mb-0 mt-2">

                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach

                </ul>

                <button type="button" class="btn-close" data-bs-dismiss="alert">
                </button>

            </div>
        @endif


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

        <form id="contactEditForm" action="{{ route('update_contact', ['id' => $contact->id]) }}" method="POST">

            @csrf


            <div class="card contact-card">


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

                <div class="card-header">

                    <h5>

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

                        Edit Vehicle Consultancy Contact Details

                    </h5>

                </div>


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

                <div class="card-body">

                    <div class="row">


                        <!-- =================================================
                             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', $contact->mobile) }}" maxlength="10" minlength="10"
                                    inputmode="numeric" required>

                            </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', $contact->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="number" class="form-control" name="working_hours"
                                    placeholder="Enter working hours"
                                    value="{{ old('working_hours', $contact->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', $contact->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', $contact->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', $contact->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', $contact->youtube) }}">

                            </div>


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

                        </div>


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

                        <div class="col-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', $contact->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-3 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>

                    <!-- UPDATE -->
                    <button type="submit" id="updateContactBtn" class="btn btn-primary btn-save">

                        <i class="ti tabler-device-floppy me-1"></i>

                        Update Contact Details

                    </button>

                </div>

            </div>

        </form>

    </div>


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

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


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

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


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


            if (
                contactForm &&
                updateContactBtn
            ) {

                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
                        ====================================== */

                        updateContactBtn.disabled = true;


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

                        updateContactBtn.innerHTML = `

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

                    Updating...

                `;

                    }
                );

            }


            /* =================================================
               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(
                '#contactEditForm input, #contactEditForm textarea, #contactEditForm select'
            ).forEach(function(field) {


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

                        removeBackendError(this);

                    }
                );


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

                        removeBackendError(this);

                    }
                );

            });


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

            function removeBackendError(field) {

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


                if (!wrapper) {
                    return;
                }


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


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

                    error.remove();

                }

            }

        });
    </script>

@endsection