@extends('layouts.app')

@section('content')

@php
    $position = old('position', 'header');
    $linkType = old('link_type', 'cms');
    $target = old('target', '_self');
@endphp

<div class="page-wrapper">
    <div class="page-content">

        <!-- Breadcrumb -->
        <div class="page-breadcrumb d-flex align-items-center mb-3">
            <div class="breadcrumb-title pe-3">Website Menu</div>
            <div class="ps-3">
                <nav>
                    <ol class="breadcrumb mb-0 p-0">
                        <li class="breadcrumb-item">
                            <a href="#"><i class="bx bx-home-alt"></i></a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="{{ route('websiteMenus.index') }}">Menu List</a>
                        </li>
                        <li class="breadcrumb-item active">Create Menu</li>
                    </ol>
                </nav>
            </div>

            <div class="ms-auto">
                <a href="{{ route('websiteMenus.index') }}" class="btn btn-light px-4">
                    <i class="bx bx-arrow-back"></i> Back
                </a>
            </div>
        </div>

        <!-- Error -->
        @if ($errors->any())
            <div class="alert alert-danger border-0 bg-danger alert-dismissible fade show">
                <div class="text-white">
                    <strong>Error!</strong>
                    <ul class="mb-0 mt-2">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        <!-- Card -->
        <div class="card radius-10">
            <div class="card-header bg-transparent">
                <h5 class="mb-0">Create Website Menu</h5>
            </div>

            <div class="card-body">

                <form method="POST" action="{{ route('websiteMenus.store') }}">
                    @csrf

                    <div class="row g-4">

                        <!-- Link Title -->
                        <div class="col-md-6">
                            <label class="form-label">Link Title *</label>
                            <input type="text"
                                name="link_title"
                                class="form-control @error('link_title') is-invalid @enderror"
                                value="{{ old('link_title') }}"
                                placeholder="Enter menu title"
                                required>
                        </div>

                        <!-- Position -->
                        <div class="col-md-3">
                            <label class="form-label">Position *</label>
                            <select name="position" class="form-select" 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>
                        </div>

                        <!-- Link Type -->
                        <div class="col-md-3">
                            <label class="form-label">Link Type *</label>
                            <select id="link_type" name="link_type" class="form-select" required>
                                <option value="cms" {{ $linkType=='cms'?'selected':'' }}>CMS Page</option>
                                <option value="custom" {{ $linkType=='custom'?'selected':'' }}>Custom URL</option>
                            </select>
                        </div>

                        <!-- CMS -->
                        <div class="col-md-6 link-group" data-type="cms">
                            <label class="form-label">Select CMS Page *</label>
                            <select name="cms_content_id" class="form-select">
                                <option value="">Select Page</option>
                                @foreach ($cmsContents as $cmsContent)
                                    <option value="{{ $cmsContent->id }}">
                                        {{ $cmsContent->title }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Custom URL -->
                        <div class="col-md-6 link-group" data-type="custom">
                            <label class="form-label">Custom URL *</label>
                            <input type="text"
                                name="custom_url"
                                class="form-control"
                                placeholder="https://example.com OR /about">
                        </div>

                        <!-- Target -->
                        <div class="col-md-3">
                            <label class="form-label">Open In *</label>
                            <select name="target" class="form-select">
                                <option value="_self">Same Tab</option>
                                <option value="_blank">New Tab</option>
                            </select>
                        </div>

                        <!-- Sort -->
                        <div class="col-md-3">
                            <label class="form-label">Sort Order *</label>
                            <input type="number"
                                name="sort_order"
                                class="form-control"
                                value="0">
                        </div>

                        <!-- Buttons -->
                        <div class="col-12 mt-3">
                            <div class="d-flex gap-2">
                                <button class="btn btn-primary px-4">
                                    <i class="bx bx-save"></i> Save
                                </button>

                                <a href="{{ route('websiteMenus.index') }}" class="btn btn-light px-4">
                                    Cancel
                                </a>
                            </div>
                        </div>

                    </div>

                </form>

            </div>
        </div>

    </div>
</div>

<!-- Script -->
<script>
    const linkType = document.getElementById('link_type');
    const groups = document.querySelectorAll('.link-group');

    function toggleFields() {
        let type = linkType.value;

        groups.forEach(el => {
            el.style.display = (el.dataset.type === type) ? 'block' : 'none';
        });
    }

    linkType.addEventListener('change', toggleFields);
    toggleFields();
</script>

@endsection