@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 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="#">{{ __('Edit Admin') }}</a>
                    </li>
                </ul>
            </div>

            <div class="dashboard_main-actions">
                <div class="switcher">
                    @php
                        $statusCheck = old('status', $admin->status) !== 'inactive';
                    @endphp
                    <label>
                        <span class="text">{{ __('Inactive') }}</span>
                        <input type="checkbox" id="statusToggle" {{ $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.update', $admin->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') }}" 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"
                                            value="{{ old('name', $admin->name) }}" required>
                                        @error('name')
                                            <small class="text-danger">{{ $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"
                                            value="{{ old('email', $admin->email) }}" required>
                                        @error('email')
                                            <small class="text-danger">{{ $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"
                                            value="{{ old('phone', $admin->phone) }}" required>
                                        @error('phone')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    {{-- Password (optional) --}}
                                    <div class="form-group float-label">
                                        <label class="form-label">{{ __('New Password (optional)') }}</label>
                                        <input type="password" name="password" class="form-control"
                                            placeholder="{{ __('Leave empty to keep current password') }}">
                                        @error('password')
                                            <small class="text-danger">{{ $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', $admin->roles->first()?->name) ? '' : 'selected' }}>
                                                {{ __('Select Role') }}
                                            </option>

                                            @foreach ($roles as $role)
                                                <option value="{{ $role->name }}"
                                                    {{ old('role', $admin->roles->first()?->name) == $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 src="{{ asset('assets/images/icons/angle.svg') }}" 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/*">

                                                @if ($admin->getFirstMediaUrl('logo'))
                                                    <input type="hidden" name="existing_logo"
                                                        value="{{ $admin->getFirstMediaUrl('logo') }}">
                                                @endif

                                                <div class="file-placeholder">
                                                    <span class="icon">
                                                        <img src="{{ asset('assets/images/icons/upload.svg') }}"
                                                            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 class="text-danger">{{ $message }}</small>
                                            @enderror
                                        </div>
                                    </div>

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

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

    {{-- Scripts --}}
    <script src="{{ asset('assets/js/svg.js') }}"></script>
    <script src="{{ asset('assets/js/main.js') }}"></script>
    <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,
                errorFieldCssClass: "is-invalid",
            });

            const phoneRegex = /^(\+?\d{10,15})$/;

            validation
                .addField('[name="name"]', [{
                        rule: "required"
                    },
                    {
                        rule: "minLength",
                        value: 3
                    },
                ])
                .addField('[name="email"]', [{
                        rule: "required"
                    },
                    {
                        rule: "email"
                    },
                ])
                .addField('[name="phone"]', [{
                        rule: "required"
                    },
                    {
                        rule: "customRegexp",
                        value: phoneRegex
                    },
                ])
                .addField('[name="password"]', [{
                    validator: (value) => value === '' || value.length >= 8,
                    errorMessage: "Password must be at least 8 characters.",
                }, ])
                .addField('[name="logo"]', [{
                        rule: "maxFilesCount",
                        value: 1
                    },
                    {
                        rule: "files",
                        value: {
                            files: {
                                extensions: ["jpeg", "jpg", "png", "svg", "webp"],
                                maxSize: 3000000,
                            }
                        }
                    }
                ]);

            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