@extends('layout')

@section('content')
    <div class="dashboard_main-content">
        <div class="dashboard_main-header">
            <div class="dashboard_main-header_info">
                <h1 class="dashboard_main-title">{{ __('Add Admin') }}</h1>
                <ul class="dashboard_main-breadcrumb">
                    <li>
                        <a href="{{ route('admin.dashboard') }}">{{ __('Dashboard') }}</a>
                    </li>
                    <li>
                        <a href="{{ route('admins.index') }}">{{ __('Admins') }}</a>
                    </li>
                    <li>
                        <a href="#">{{ __('Add Admin') }}</a>
                    </li>
                </ul>
            </div>




            <div class="dashboard_main-actions">
                <div class="switcher">
                    @php
                        $statusCheck = true;
                        if (old('status') === 'inactive') {
                            $statusCheck = false;
                        }
                    @endphp
                    <label>
                        <span class="text">{{ __('Inactive') }}</span>
                        <input type="checkbox" id="statusToggle" name="status" value="active"
                            {{ $statusCheck ? 'checked' : '' }} />
                        <span class="slider"></span>
                        <span class="text">{{ __('Active') }}</span>
                    </label>
                </div>
            </div>


        </div>



        <div class="dashboard_main-body">
            <form id='vendorForm' action="{{ route('admins.store') }}" method="POST" enctype="multipart/form-data">
                @csrf

                <div class="accordion-list">
                    {{-- BASIC INFORMATION --}}
                    <div class="accordion-item">
                        <h3 class="accordion-title">
                            {{ __('Basic Information') }}
                            <span class="icon">
                                <img src="{{ asset('assets/images/icons/angle.svg') }}" alt="icon" class="svg" />
                            </span>
                        </h3>
                        <div class="accordion-body">
                            <div class="body-content">
                                <div class="form-grid">

                                    {{-- Admin Name --}}
                                    <div class="form-group float-label">
                                        <label class="form-label">{{ __('Admin Name') }}</label>
                                        <input type="text" name="name" class="form-control" placeholder="{{ __('Admin Name') }}"
                                            value="{{ old('name') }}" required />
                                        @error('name')
                                            <small style="color: red;">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    {{-- Email --}}
                                    <div class="form-group float-label">
                                        <label class="form-label">{{ __('Email') }}</label>
                                        <input type="email" name="email" class="form-control" placeholder="{{ __('Email') }}"
                                            value="{{ old('email') }}" required />
                                        @error('email')
                                            <small style="color: red;">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    {{-- Phone --}}
                                    <div class="form-group float-label">
                                        <label class="form-label">{{ __('Phone Number') }}</label>
                                        <input type="tel" name="phone" class="form-control" placeholder="{{ __('Phone Number') }}"
                                            value="{{ old('phone') }}" required />
                                        @error('phone')
                                            <small style="color: red;">{{ $message }}</small>
                                        @enderror
                                    </div>


                                    {{-- Admin Password --}}
                                    <div class="form-group float-label">
                                        <label class="form-label">{{ __('Admin Password') }}</label>
                                        <input type="password" name="password" class="form-control"
                                            placeholder="{{ __('Admin Password') }}" value="{{ old('password') }}" required />
                                        @error('password')
                                            <small style="color: red;">{{ $message }}</small>
                                        @enderror
                                    </div>





                                    {{-- Admin Role --}}
                                    <div class="form-group float-label">
                                        <label class="form-label" style="top:-8px;font-size:12px;color:#777;">
                                            {{ __('Admin Role') }}
                                        </label>

                                        <select name="role" class="form-control" required style="padding-top:20px">
                                            <option value="" disabled {{ old('role') ? '' : 'selected' }}>
                                                {{ __('Select Role') }}
                                            </option>

                                            @foreach ($roles as $role)
                                                <option value="{{ $role->name }}"
                                                    {{ old('role') == $role->name ? 'selected' : '' }}>
                                                    {{ ucfirst($role->name) }}
                                                </option>
                                            @endforeach
                                        </select>

                                        @error('role')
                                            <small style="color:red">{{ $message }}</small>
                                        @enderror
                                    </div>


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


                    {{-- STYLE GUIDELINES --}}
                    <div class="accordion-item">
                        <h3 class="accordion-title">
                            {{ __('Style Guidelines') }}
                            <span class="icon">
                                <img loading="lazy" src="{{ asset('assets/images/icons/angle.svg') }}" alt="icon"
                                    class="svg" />
                            </span>
                        </h3>
                        <div class="accordion-body">
                            <div class="body-content">
                                <div class="form-grid">



                                    {{-- Logo Upload --}}
                                    <div class="form-group full-w" id="logoUpload">
                                        <div class="file-uploader">
                                            <label class="file-upload-label">
                                                <input type="file" name="logo" accept="image/*" />
                                                <div class="file-placeholder">
                                                    <span class="icon">
                                                        <img src="{{ asset('assets/images/icons/upload.svg') }}"
                                                            alt="icon" class="svg" />
                                                    </span>
                                                    <span class="text">
                                                        <u>{{ __('Upload Logo') }}</u> {{ __('or drag and drop') }}
                                                    </span>
                                                    <span class="hint">{{ __('SVG (max. 3MB)') }}</span>
                                                </div>
                                                <div class="file-preview"></div>
                                            </label>
                                            @error('logo')
                                                <small style="color: red;">{{ $message }}</small>
                                            @enderror
                                        </div>
                                    </div>





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

                </div>

                <div class="form-buttons">
                    <button type="submit" class="btn btn-primary">{{ __('Create Admin') }}</button>
                    {{-- ✅ Save as Draft (different route) --}}
                    <button type="submit" class="btn btn-secondary" formaction="{{ route('admins.draft') }}">
                        {{ __('Save as Draft') }}
                    </button>
                    <a href="{{ route('admins.index') }}" class="btn btn-reset">{{ __('Cancel') }}</a>
                </div>
            </form>
        </div>



    </div>

    <script src="{{ asset('assets/js/svg.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/coloris.min.js"></script>
    <script src="{{ asset('assets/js/main.js') }}"></script>

    <script src="{{ asset('assets/js/map.js') }}"></script>
    <script
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDG_YTiNT7XKtOgwleiwGa4s2v20OAbLNQ&callback=initMap&libraries=places"
        async defer></script>


    <script>
        const openModal = document.getElementById("openModal");
        const closeModal = document.getElementById("closeModal");
        const modalContent = document.getElementById("overlay");

        openModal.addEventListener("click", () => {
            modalContent.classList.add("active");
        });

        closeModal.addEventListener("click", () => {
            modalContent.classList.remove("active");
        });

        modalContent.addEventListener("click", (e) => {
            if (e.target === modalContent) {
                modalContent.classList.remove("active");
            }
        });
    </script>









    {{-- active and inactive --}}
    <script>
        const form = document.getElementById('vendorForm');
        const statusToggle = document.getElementById('statusToggle');

        form.addEventListener('submit', function(e) {
            // Remove any existing hidden input for status
            const existing = form.querySelector('input[name="status"]');
            if (existing) existing.remove();

            // Add a hidden input with the correct value
            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'status';
            input.value = statusToggle.checked ? 'active' : 'inactive';
            form.appendChild(input);
        });
    </script>

    {{-- Include JustValidate --}}
    <script src="https://unpkg.com/just-validate@latest/dist/just-validate.production.min.js"></script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const validation = new JustValidate("#vendorForm", {
                validateBeforeSubmitting: true,
                focusInvalidField: true,
                errorFieldCssClass: "is-invalid",
                errorLabelStyle: {
                    color: "#fe3b29",
                    paddingTop: "4px",
                    fontSize: "12px",
                },
            });

            // Reusable regex patterns
            const hexColorRegex = /^#(?:[A-Fa-f0-9]{3,4}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})$/;
            const urlRegex = /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([/\w .-]*)*\/?$/;
            const phoneRegex = /^(\+?\d{10,15})$/;

            // Admin Name
            validation.addField('[name="name"]', [{
                    rule: "required",
                    errorMessage: "{{ __('Admin name is required.') }}"
                },
                {
                    rule: "minLength",
                    value: 3,
                    errorMessage: "{{ __('Admin name must be at least 3 characters long.') }}"
                },
                {
                    rule: "maxLength",
                    value: 255,
                    errorMessage: "{{ __('Admin name cannot exceed 255 characters.') }}"
                },
            ]);

            // Email
            validation.addField('[name="email"]', [{
                    rule: "required",
                    errorMessage: "Email address is required."
                },
                {
                    rule: "email",
                    errorMessage: "{{ __('Enter a valid email address.') }}"
                },
            ]);

            // Phone
            validation.addField('[name="phone"]', [{
                    rule: "required",
                    errorMessage: "{{ __('Phone number is required.') }}"
                },
                {
                    rule: "customRegexp",
                    value: phoneRegex,
                    errorMessage: "{{ __('Enter a valid phone number (10–15 digits, numbers only).') }}"
                },
            ]);


            // Password
            validation.addField('[name="password"]', [{
                    rule: "required",
                    errorMessage: "Password is required."
                },
                {
                    rule: "minLength",
                    value: 8,
                    errorMessage: "{{ __('Password must be at least 8 characters.') }}"
                },
                {
                    rule: "maxLength",
                    value: 20,
                    errorMessage: "{{ __('Password cannot exceed 20 characters.') }}"
                },
            ]);


            // Logo Upload
            validation.addField(
                '[name="logo"]',
                [
                    {
                        rule: "files",
                        value: {
                            files: {
                                extensions: ["jpeg", "jpg", "png", "gif", "webp", "svg"],
                                maxSize: 3000000,
                                minSize: 10000,
                                types: [
                                    "image/jpeg",
                                    "image/jpg",
                                    "image/png",
                                    "image/gif",
                                    "image/webp",
                                    "image/svg+xml",
                                ],
                            },
                        },
                        errorMessage: "{{ __('Accepted formats: JPEG, JPG, PNG, GIF, WEBP, or SVG (10 KB – 3 MB).') }}",
                    },
                ], {
                    errorsContainer: document.getElementById("logoUpload"),
                }
            );


            // Expand accordion section when invalid
            validation.onFail((fields) => {
                expandInvalidFields(fields);
            });

            const form = document.getElementById("vendorForm");
            form.addEventListener("input", () => {
                const invalidFields = document.querySelectorAll(".is-invalid");
                invalidFields.forEach((elem) => {
                    const parent = elem.closest(".accordion-body");
                    if (parent) parent.style.maxHeight = parent.scrollHeight + "px";
                });
            });
            form.addEventListener("change", () => {
                const invalidFields = document.querySelectorAll(".is-invalid");
                invalidFields.forEach((elem) => {
                    const parent = elem.closest(".accordion-body");
                    if (parent) parent.style.maxHeight = parent.scrollHeight + "px";
                });
            });

            function expandInvalidFields(fields) {
                Object.values(fields).forEach(({
                    elem
                }) => {
                    const parent = elem.closest(".accordion-body");
                    if (parent) parent.style.maxHeight = parent.scrollHeight + "px";
                });
            }
            // On success, add hidden status field and submit
            validation.onSuccess((event) => {
                const form = event.target;
                const statusToggle = document.getElementById("statusToggle");

                form.querySelector('input[name="status"]')?.remove();

                const input = document.createElement("input");
                input.type = "hidden";
                input.name = "status";
                input.value = statusToggle?.checked ? "active" : "inactive";
                form.appendChild(input);

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