@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">Edit Vendor</h1>
                <ul class="dashboard_main-breadcrumb">
                    <li>
                        <a href="{{ route('admin.dashboard') }}">Dashboard</a>
                    </li>
                    <li>
                        <a href="{{ route('vendors.index') }}">Vendors</a>
                    </li>
                    <li>
                        <a href="#">Edit Vendor</a>
                    </li>
                </ul>
            </div>

            <div class="dashboard_main-actions">
                <div class="switcher">
                    @php
                        $statusCheck = true;
                        if (old('status', $vendor->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('vendors.update', $vendor->id) }}" method="POST"
                enctype="multipart/form-data">
                @csrf
                @method('PUT')

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

                                    {{-- Vendor Name --}}
                                    <div class="form-group float-label">
                                        <label class="form-label">Vendor Name</label>
                                        <input type="text" name="name" class="form-control" placeholder="Vendor Name"
                                            value="{{ old('name', $vendor->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', $vendor->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', $vendor->phone) }}" required />
                                        @error('phone')
                                            <small style="color: red;">{{ $message }}</small>
                                        @enderror
                                    </div>

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

                                    {{-- Location --}}
                                    <div class="form-group float-label full-w">
                                        <label class="form-label">
                                            Location
                                        </label>
                                        <div class="location-content">
                                            <input type="text" name="location" class="form-control"
                                                placeholder="Location" id="locationInput"
                                                value="{{ old('location', $vendor->location) }}" readonly required />

                                            <input type="hidden" name="lat" id="lat"
                                                value="{{ old('lat', $vendor->lat) }}" readonly required>
                                            <input type="hidden" name="lon" id="lon"
                                                value="{{ old('lon', $vendor->lon) }}" readonly required>

                                            <button type="button" class="form-icon open-modal" id="openModal">
                                                <img loading="lazy" src="{{ asset('assets/images/icons/location.svg') }}"
                                                    alt="icon" class="svg" />
                                            </button>

                                            <div class="modalContent" id="overlay">
                                                <div class="modal">
                                                    <div class="modal-map">
                                                        <div id="map"></div>

                                                        <button id="locationBtn" class="btn btn-danger" type="button">
                                                            <i>
                                                                <img src="{{ asset('assets/images/icons/location.svg') }}"
                                                                    alt="icon" class="svg" />
                                                            </i>
                                                            Current Location
                                                        </button>
                                                    </div>
                                                    <div class="form-buttons modal-buttons">
                                                        <button type="button" class="btn btn-primary" id="addLocation">
                                                            Add location
                                                        </button>
                                                        <button type="button" class="btn btn-reset" id="closeModal">
                                                            Cancel
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        @error('location')
                                            <small style="color: red;">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    {{-- Description --}}
                                    <div class="form-group full-w">
                                        <textarea name="description" placeholder="Description" class="form-control" required>{{ old('description', $vendor->description) }}</textarea>
                                        @error('description')
                                            <small style="color: red;">{{ $message }}</small>
                                        @enderror
                                    </div>

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

                    {{-- COMMISSION INFORMATION --}}
                    <div class="accordion-item">
                        <h3 class="accordion-title">
                            Commission 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">

                                    {{-- Commission Type --}}
                                    <div class="form-group">
                                        <select name="commission_type" id="commission_type" class="form-control"
                                            required>
                                            <option value="" hidden>Commission Type</option>
                                            <option value="percent"
                                                {{ old('commission_type', $vendor->commission_type) == 'percent' ? 'selected' : '' }}>
                                                Percent</option>
                                            <option value="fixed"
                                                {{ old('commission_type', $vendor->commission_type) == 'fixed' ? 'selected' : '' }}>
                                                Fixed</option>
                                        </select>
                                        @error('commission_type')
                                            <small style="color: red;">{{ $message }}</small>
                                        @enderror
                                    </div>

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

                                    {{-- Commission Frequency --}}
                                    <div class="form-group">
                                        <select name="commission_frequency" class="form-control" required>
                                            <option value="" hidden>Commission Frequency</option>
                                            <option value="monthly"
                                                {{ old('commission_frequency', $vendor->commission_frequency) == 'monthly' ? 'selected' : '' }}>
                                                Monthly</option>
                                            <option value="weekly"
                                                {{ old('commission_frequency', $vendor->commission_frequency) == 'weekly' ? 'selected' : '' }}>
                                                Weekly</option>
                                        </select>
                                        @error('commission_frequency')
                                            <small style="color: red;">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    {{-- Commission Notes --}}
                                    <div class="form-group float-label">
                                        <label class="form-label">Commission Notes</label>
                                        <input type="text" name="commission_notes" class="form-control"
                                            placeholder="Commission Notes"
                                            value="{{ old('commission_notes', $vendor->commission_notes) }}" required />
                                        @error('commission_notes')
                                            <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">

                                    {{-- Primary Color --}}
                                    <div class="form-group primary_color float-label">
                                        <label class="form-label">Primary Color</label>
                                        <input type="text" name="primary_color" class="form-control" data-coloris
                                            placeholder="Primary Color"
                                            value="{{ old('primary_color', $vendor->primary_color) }}" required />

                                        <span class="form-hint">
                                            <img src="{{ asset('assets/images/icons/info.svg') }}" alt="icon"
                                                class="svg" />
                                            Enter the hex code or select from color picker
                                        </span>
                                        @error('primary_color')
                                            <small style="color: red;">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    {{-- Secondary Color --}}
                                    <div class="form-group secondary_color float-label">
                                        <label class="form-label">Secondary Color</label>
                                        <input type="text" name="secondary_color" class="form-control" data-coloris
                                            placeholder="Secondary Color"
                                            value="{{ old('secondary_color', $vendor->secondary_color) }}" required />

                                        <span class="form-hint">
                                            <img src="{{ asset('assets/images/icons/info.svg') }}" alt="icon"
                                                class="svg" />
                                            This color is used for accents and highlights
                                        </span>

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

                                    {{-- Natural Color --}}
                                    <div class="form-group tertiary_color float-label">
                                        <label class="form-label">Natural Color</label>
                                        <input type="text" name="tertiary_color" class="form-control" data-coloris
                                            placeholder="Natural Color"
                                            value="{{ old('tertiary_color', $vendor->tertiary_color) }}" required />

                                        <span class="form-hint">
                                            <img src="{{ asset('assets/images/icons/info.svg') }}" alt="icon"
                                                class="svg" />
                                            This color is used for text and backgrounds
                                        </span>
                                        @error('tertiary_color')
                                            <small style="color: red;">{{ $message }}</small>
                                        @enderror
                                    </div>



                                    {{-- 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/*" />
                                                @if ($vendor->getFirstMediaUrl('logo'))
                                                    <input type="hidden" name="existing_image"
                                                        value="{{ $vendor->getFirstMediaUrl('logo') }}">
                                                @endif
                                                <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>



                                    {{-- Language --}}
                                    <div class="form-group full-w">
                                        <select class="form-control" name="language" required>
                                            <option value="" hidden disabled>Select Language</option>
                                            <option value="English"
                                                {{ old('language', $vendor->language) == 'English' ? 'selected' : '' }}>
                                                English</option>
                                            <option value="Arabic"
                                                {{ old('language', $vendor->language) == 'Arabic' ? 'selected' : '' }}>
                                                Arabic</option>
                                            <option value="Latin"
                                                {{ old('language', $vendor->language) == 'Latin' ? 'selected' : '' }}>
                                                Latin</option>
                                        </select>
                                        <span class="form-hint">
                                            <img src="{{ asset('assets/images/icons/info.svg') }}" alt="icon"
                                                class="svg" />
                                            If you don’t select a language, English will be used by default
                                        </span>

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

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

                </div>

                <div class="form-buttons">
                    <button type="submit" class="btn btn-primary">Update Vendor</button>
                    <a href="{{ route('vendors.index') }}" class="btn btn-reset">Cancel</a>
                </div>
            </form>
        </div>
    </div>

    {{-- Scripts --}}
    <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=AIzaSyDWnEgtFGwE3ilBsQW4JA6fmep0HlpAky4&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>




    {{-- validation for percentage value for commision --}}
    {{-- <script>
        document.addEventListener('DOMContentLoaded', function() {
            const commissionType = document.querySelector('select[name="commission_type"]');
            const commissionValue = document.querySelector('input[name="commission_value"]');

            commissionValue.addEventListener('input', function() {
                if (commissionType.value === 'percent') {
                    let val = parseFloat(this.value);

                    // Clamp the value between 0 and 100
                    if (val < 0) this.value = 0;
                    if (val > 100) this.value = 100;
                }
            });

            // Optional: validate on form submit
            const form = commissionValue.closest('form');
            form.addEventListener('submit', function(e) {
                if (commissionType.value === 'percent') {
                    const val = parseFloat(commissionValue.value);
                    if (isNaN(val) || val < 0 || val > 100) {
                        e.preventDefault();
                        alert('Commission value must be between 0 and 100 when type is Percent.');
                    }
                }
            });
        });
    </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?:\/\/)?([\w.-]+)\.([a-z]{2,})([\/\w .-]*)*\/?$/i;
            const phoneRegex = /^(\+?\d{10,15})$/;

            // Vendor Name
            validation.addField('[name="name"]', [{
                    rule: "required",
                    errorMessage: "Vendor name is required."
                },
                {
                    rule: "minLength",
                    value: 3,
                    errorMessage: "Vendor name must be at least 3 characters long."
                },
                {
                    rule: "maxLength",
                    value: 255,
                    errorMessage: "Vendor 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)."
                },
            ]);

            // Website
            validation.addField('[name="website"]', [{
                    rule: "required",
                    errorMessage: "Website URL is required."
                },
                {
                    rule: "customRegexp",
                    value: urlRegex,
                    errorMessage: "Enter a valid website address (e.g., https://example.com)."
                },
            ]);

            // Location Fields
            const locationError = "Location selection is required.";
            validation
                .addField('[name="location"]', [{
                    rule: "required",
                    errorMessage: locationError
                }])
                .addField('[name="lat"]', [{
                        rule: "required",
                        errorMessage: locationError
                    },
                    {
                        rule: "number",
                        errorMessage: "Choose a valid location on the map."
                    },
                ])
                .addField('[name="lon"]', [{
                        rule: "required",
                        errorMessage: locationError
                    },
                    {
                        rule: "number",
                        errorMessage: "Choose a valid location on the map."
                    },
                ]);

            // Description
            validation.addField('[name="description"]', [{
                rule: "required",
                errorMessage: "Description cannot be empty."
            }, ]);

            // Colors (looped for brevity)
            const colorFields = ["primary_color", "secondary_color", "tertiary_color"];
            colorFields.forEach((name) => {
                const label = name.replace("_color", "").replace("_", " ");
                const formattedLabel = label.charAt(0).toUpperCase() + label.slice(1);
                const container = document.querySelector(`.${name}`);
                validation.addField(`[name="${name}"]`, [{
                        rule: "required",
                        errorMessage: `${formattedLabel} color is required.`,
                    },
                    {
                        rule: "customRegexp",
                        value: hexColorRegex,
                        errorMessage: "Enter a valid HEX color (e.g., #ff0000 or #f00).",
                    },
                ], {
                    errorsContainer: container || undefined,
                });
            });

            // Language
            validation.addField('[name="language"]', [{
                rule: "required",
                errorMessage: "Language selection is required."
            }, ]);

            // Logo Upload
            validation.addField(
                '[name="logo"]',
                [{
                        rule: "maxFilesCount",
                        value: 1,
                        errorMessage: "Only one logo image is allowed."
                    },
                    {
                        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"),
                }
            );

            // Commission Type
            validation.addField('[name="commission_type"]', [{
                rule: "required",
                errorMessage: "Select a commission type."
            }, ]);

            // Commission Value
            validation.addField('[name="commission_value"]', [{
                    rule: "required",
                    errorMessage: "Commission value is required."
                },
                {
                    validator: (value, fields) => {
                        const type = document.getElementById("commission_type")?.value;
                        const val = parseFloat(value);
                        return type !== 'percent' || (val >= 0 && val <= 100);
                    },
                    errorMessage: 'When commission type is Percent, value must be between 0 and 100.',
                },
            ]);

            // Commission Frequency & Notes
            validation
                .addField('[name="commission_frequency"]', [{
                    rule: "required",
                    errorMessage: "Select a commission frequency."
                }, ])
                .addField('[name="commission_notes"]', [{
                    rule: "required",
                    errorMessage: "Commission notes cannot be empty."
                }, ]);

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