@extends('adminlte::page')

@section('title', 'SEO Dashboard')

@section('content_header')
    <h1>SEO Management</h1>
@stop

@section('content')
    <div class="card card-dark">
        <div class="card-header">
            <h3 class="card-title">Add SEO</h3>
        </div>

        {{-- Display validation errors and session messages --}}
        @if (session('error'))
            <h6 class="alert alert-danger">
                {{ session('error') }}
            </h6>
        @endif
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form method="POST" action="{{ route('seo.store') }}" enctype="multipart/form-data" class="jqueryValidation">
            @csrf

            <div class="card-body">
                {{-- Route Name --}}
                <div class="form-group row">
                    <div class="col-md-6">
                        <label for="route_name">Route Name</label>
                        <x-adminlte-input class="form-control" id="route_name" name="route_name"
                            placeholder="Enter Route Name" required />
                    </div>

                    {{-- Meta Title --}}
                    <div class="col-md-6">
                        <label for="meta_title">Meta Title</label>
                        <x-adminlte-input class="form-control" id="meta_title" name="meta_title"
                            placeholder="Enter Meta Title" required />
                    </div>
                </div>

                {{-- Meta Keywords --}}
                <div class="form-group row">
                    <div class="col-md-6">
                        <label for="meta_keywords">Meta Keywords</label>
                        <input type="text" class="form-control" id="meta_keywords" name="meta_keywords"
                            placeholder="Enter Meta Keywords" required />
                    </div>

                    {{-- Meta Description --}}
                    <div class="col-md-6">
                        <label for="meta_description">Meta Description</label>
                        <textarea class="form-control" id="meta_description" name="meta_description" placeholder="Enter Meta Description"
                            required></textarea>
                    </div>
                </div>

                {{-- Canonical Tag --}}
                <div class="form-group row">
                    <div class="col-md-6">
                        <label for="canonical_tag">Canonical Tag</label>
                        <input type="url" class="form-control" id="canonical_tag" name="canonical_tag"
                            placeholder="Enter Canonical Tag URL" />
                    </div>

                    {{-- OG Title --}}
                    <div class="col-md-6">
                        <label for="og_title">OG Title</label>
                        <input type="text" class="form-control" id="og_title" name="og_title"
                            placeholder="Enter OG Title" />
                    </div>
                </div>

                {{-- OG Description --}}
                <div class="form-group row">
                    <div class="col-md-6">
                        <label for="og_description">OG Description</label>
                        <textarea class="form-control" id="og_description" name="og_description" placeholder="Enter OG Description"></textarea>
                    </div>

                    {{-- OG Image --}}
                    <div class="col-md-6">
                        <label for="og_image">OG Image</label>
                        <input type="file" class="form-control" id="og_image" name="og_image" />
                    </div>
                </div>

                {{-- OG URL --}}
                <div class="form-group row">
                    <div class="col-md-6">
                        <label for="og_url">OG URL</label>
                        <input type="url" class="form-control" id="og_url" name="og_url"
                            placeholder="Enter OG URL" />
                    </div>

                    {{-- Twitter Card --}}
                    <div class="col-md-6">
                        <label for="twitter_card">Twitter Card</label>
                        <input type="text" class="form-control" id="twitter_card" name="twitter_card"
                            placeholder="Enter Twitter Card Type" />
                    </div>
                </div>

                {{-- Twitter Title --}}
                <div class="form-group row">
                    <div class="col-md-6">
                        <label for="twitter_title">Twitter Title</label>
                        <input type="text" class="form-control" id="twitter_title" name="twitter_title"
                            placeholder="Enter Twitter Title" />
                    </div>

                    {{-- Twitter Description --}}
                    <div class="col-md-6">
                        <label for="twitter_description">Twitter Description</label>
                        <textarea class="form-control" id="twitter_description" name="twitter_description"
                            placeholder="Enter Twitter Description"></textarea>
                    </div>
                </div>

                {{-- Twitter Image --}}
                <div class="form-group row">
                    <div class="col-md-6">
                        <label for="twitter_image">Twitter Image</label>
                        <input type="file" class="form-control" id="twitter_image" name="twitter_image" />
                    </div>
                </div>

                {{-- Form Buttons --}}
                <div class="card-footer d-flex justify-content-end">
                    <a href="{{ route('seo.index') }}" class="btn btn-danger mx-1">Cancel</a>
                    <button type="submit" class="btn btn-dark mx-1">Submit</button>
                </div>
            </div>
        </form>
    </div>
@stop

@push('js')
    <script>
        // Add custom JavaScript here if needed
    </script>
@endpush