@extends('layouts.app')

@section('content')
@php
    $position = old('position', $websiteMenu->position);
    $linkType = old('link_type', $websiteMenu->link_type);
    $target = old('target', $websiteMenu->target);
@endphp

<div class="page-wrapper">
    <div class="page-content">
        <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
            <div class="ps-3">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 p-0">
                        <li class="breadcrumb-item"><a href="javascript:;"><i class="bx bx-home-alt"></i></a></li>
                        <li class="breadcrumb-item"><a href="{{ route('websiteMenus.index') }}">Website Menu Section</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Edit Website Menu</li>
                    </ol>
                </nav>
            </div>
        </div>

        <hr />

        @if ($errors->any())
            <div class="alert alert-danger">
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="card">
            <div class="card-body">
                <h6 class="mb-1">Edit Website Menu</h6>
                <p class="text-muted mb-4">Update website navigation title, position, target and order.</p>

                <form method="POST" action="{{ route('websiteMenus.update', $websiteMenu->id) }}">
                    @csrf
                    @method('PUT')

                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="link_title" class="form-label">Link Title <span class="text-danger">*</span></label>
                            <input
                                type="text"
                                name="link_title"
                                id="link_title"
                                class="form-control @error('link_title') is-invalid @enderror"
                                value="{{ old('link_title', $websiteMenu->link_title) }}"
                                placeholder="Home"
                                maxlength="255"
                                required
                            >
                            @error('link_title')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-3">
                            <label for="position" class="form-label">Position <span class="text-danger">*</span></label>
                            <select id="position" name="position" class="form-select @error('position') is-invalid @enderror" required>
                                <option value="header" {{ $position === 'header' ? 'selected' : '' }}>Header</option>
                                <option value="footer" {{ $position === 'footer' ? 'selected' : '' }}>Footer</option>
                                <option value="both" {{ $position === 'both' ? 'selected' : '' }}>Both</option>
                            </select>
                            @error('position')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-3">
                            <label for="link_type" class="form-label">Link Type <span class="text-danger">*</span></label>
                            <select id="link_type" name="link_type" class="form-select @error('link_type') is-invalid @enderror" required>
                                <option value="cms" {{ $linkType === 'cms' ? 'selected' : '' }}>CMS Page</option>
                                <option value="custom" {{ $linkType === 'custom' ? 'selected' : '' }}>Custom URL</option>
                            </select>
                            @error('link_type')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6 link-type-group" data-link-type="cms">
                            <label for="cms_content_id" class="form-label">CMS Page <span class="text-danger">*</span></label>
                            <select id="cms_content_id" name="cms_content_id" class="form-select @error('cms_content_id') is-invalid @enderror">
                                <option value="">Select CMS Page</option>
                                @foreach ($cmsContents as $cmsContent)
                                    <option value="{{ $cmsContent->id }}" {{ (string) old('cms_content_id', $websiteMenu->cms_content_id) === (string) $cmsContent->id ? 'selected' : '' }}>
                                        {{ $cmsContent->title }}{{ $cmsContent->slug ? ' (' . $cmsContent->slug . ')' : '' }}{{ $cmsContent->status === 'deactivated' ? ' - Deactivated' : '' }}
                                    </option>
                                @endforeach
                            </select>
                            @error('cms_content_id')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6 link-type-group" data-link-type="custom">
                            <label for="custom_url" class="form-label">Custom URL <span class="text-danger">*</span></label>
                            <input
                                type="text"
                                name="custom_url"
                                id="custom_url"
                                class="form-control @error('custom_url') is-invalid @enderror"
                                value="{{ old('custom_url', $websiteMenu->custom_url) }}"
                                placeholder="https://example.com/contact or /contact"
                            >
                            @error('custom_url')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-3">
                            <label for="target" class="form-label">Open In <span class="text-danger">*</span></label>
                            <select id="target" name="target" class="form-select @error('target') is-invalid @enderror" required>
                                <option value="_self" {{ $target === '_self' ? 'selected' : '' }}>Same Tab</option>
                                <option value="_blank" {{ $target === '_blank' ? 'selected' : '' }}>New Tab</option>
                            </select>
                            @error('target')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-3">
                            <label for="sort_order" class="form-label">Sort Order <span class="text-danger">*</span></label>
                            <input
                                type="number"
                                name="sort_order"
                                id="sort_order"
                                class="form-control @error('sort_order') is-invalid @enderror"
                                value="{{ old('sort_order', $websiteMenu->sort_order) }}"
                                min="0"
                                required
                            >
                            @error('sort_order')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-12 d-flex flex-wrap gap-2 mt-2">
                            <button type="submit" class="btn btn-primary px-4">Update Website Menu</button>
                            <a href="{{ route('websiteMenus.index') }}" class="btn btn-light border px-4">Back</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    (function () {
        const linkTypeInput = document.getElementById('link_type');
        const groups = document.querySelectorAll('.link-type-group');

        function syncLinkType() {
            const currentType = linkTypeInput ? linkTypeInput.value : 'cms';

            groups.forEach(function (group) {
                const isVisible = group.getAttribute('data-link-type') === currentType;
                group.style.display = isVisible ? '' : 'none';
            });
        }

        if (linkTypeInput) {
            linkTypeInput.addEventListener('change', syncLinkType);
            syncLinkType();
        }
    })();
</script>
@endsection