@extends('layouts.app')

@section('content')

@if(session('success'))
<div class="alert alert-success alert-dismissible fade show" role="alert">
    <i class="fa fa-check-circle"></i> {{ session('success') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif

<div class="card">
    <div class="card-header">
        <h3><i class="fa fa-plus-circle"></i> Add Destination</h3>
    </div>
    <div class="card-body">
        <form action="{{ route('holiday.destinations.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="container-fluid">

                <div class="row mb-3">
                    <label class="col-md-3 col-form-label">Name *</label>
                    <div class="col-md-6">
                        <input type="text" name="name" id="name" class="form-control" value="{{ old('name') }}">
                        @error('name') <div class="text-danger">{{ $message }}</div> @enderror
                    </div>
                </div>

                <div class="row mb-3">
                    <label class="col-md-3 col-form-label">Heading</label>
                    <div class="col-md-6">
                        <input type="text" name="heading" id="heading" class="form-control" value="{{ old('heading') }}">
                    </div>
                </div>

                <div class="row mb-3">
                    <label class="col-md-3 col-form-label">Short Description</label>
                    <div class="col-md-6">
                        <textarea name="short_description" class="form-control" rows="4">{{ old('short_description') }}</textarea>
                    </div>
                </div>

                <div class="row mb-3">
                    <label class="col-md-3 col-form-label">Package Heading</label>
                    <div class="col-md-6">
                        <input type="text" name="package_heading" class="form-control" value="{{ old('package_heading') }}">
                    </div>
                </div>

                <div class="row mb-3">
                    <label class="col-md-3 col-form-label">Package SubHeading</label>
                    <div class="col-md-6">
                        <input type="text" name="package_subheading" class="form-control" value="{{ old('package_subheading') }}">
                    </div>
                </div>

                <div class="row mb-3">
                    <label class="col-md-3 col-form-label">Detail Heading</label>
                    <div class="col-md-6">
                        <input type="text" name="detail_heading" class="form-control" value="{{ old('detail_heading') }}">
                    </div>
                </div>

                <div class="row mb-3">
                    <label class="col-md-3 col-form-label">Detail SubHeading</label>
                    <div class="col-md-6">
                        <input type="text" name="detail_subheading" class="form-control" value="{{ old('detail_subheading') }}">
                    </div>
                </div>

                <div class="row mb-3">
                    <label class="col-md-3 col-form-label">Photo *</label>
                    <div class="col-md-6">
                        <input type="file" name="photo" class="form-control">
                        @error('photo') <div class="text-danger">{{ $message }}</div> @enderror
                    </div>
                </div>

                <div class="row mb-3">
                    <label class="col-md-3 col-form-label">Banner *</label>
                    <div class="col-md-6">
                        <input type="file" name="banner" class="form-control">
                        @error('banner') <div class="text-danger">{{ $message }}</div> @enderror
                    </div>
                </div>

                <hr>
                <h5>Destination Content</h5>

                <div class="row mb-3">
                    <label class="col-md-3 col-form-label">Introduction</label>
                    <div class="col-md-9">
                        <textarea name="introduction" id="introduction">{{ old('introduction') }}</textarea>
                    </div>
                </div>

                <div class="row mb-3">
                    <label class="col-md-3 col-form-label">Experience</label>
                    <div class="col-md-9">
                        <textarea name="experience" id="experience">{{ old('experience') }}</textarea>
                    </div>
                </div>

                <div class="row mb-3">
                    <label class="col-md-3 col-form-label">Weather</label>
                    <div class="col-md-9">
                        <textarea name="weather" id="weather">{{ old('weather') }}</textarea>
                    </div>
                </div>

                <div class="row mb-3">
                    <label class="col-md-3 col-form-label">Hotel</label>
                    <div class="col-md-9">
                        <textarea name="hotel" id="hotel">{{ old('hotel') }}</textarea>
                    </div>
                </div>

                <div class="row mb-3">
                    <label class="col-md-3 col-form-label">Transportation</label>
                    <div class="col-md-9">
                        <textarea name="transportation" id="transportation">{{ old('transportation') }}</textarea>
                    </div>
                </div>

                <div class="row mb-3">
                    <label class="col-md-3 col-form-label">Culture</label>
                    <div class="col-md-9">
                        <textarea name="culture" id="culture">{{ old('culture') }}</textarea>
                    </div>
                </div>

                <hr>
                <h5>SEO Information</h5>

                <div class="row mb-3">
                    <label class="col-md-3 col-form-label">Meta Title *</label>
                    <div class="col-md-6">
                        <input type="text" name="meta_title" class="form-control" value="{{ old('meta_title') }}">
                        @error('meta_title') <div class="text-danger">{{ $message }}</div> @enderror
                    </div>
                </div>

                <div class="row mb-3">
                    <label class="col-md-3 col-form-label">Meta Keywords *</label>
                    <div class="col-md-6">
                        <input type="text" name="meta_keywords" class="form-control" value="{{ old('meta_keywords') }}">
                        @error('meta_keywords') <div class="text-danger">{{ $message }}</div> @enderror
                    </div>
                </div>

                <div class="row mb-3">
                    <label class="col-md-3 col-form-label">Meta Description *</label>
                    <div class="col-md-6">
                        <textarea name="meta_description" class="form-control">{{ old('meta_description') }}</textarea>
                        @error('meta_description') <div class="text-danger">{{ $message }}</div> @enderror
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-3"></div>
                    <div class="col-md-6">
                        <button class="btn btn-primary">Submit</button>
                        <a href="{{ route('holiday.destinations') }}" class="btn btn-outline-secondary ms-2">Cancel</a>
                    </div>
                </div>

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

@endsection

@section('scripts')
<script src="https://cdn.ckeditor.com/4.25.1-lts/full/ckeditor.js"></script>
<script>
    CKEDITOR.config.versionCheck = false;
    CKEDITOR.replace('introduction');
    CKEDITOR.replace('experience');
    CKEDITOR.replace('weather');
    CKEDITOR.replace('hotel');
    CKEDITOR.replace('transportation');
    CKEDITOR.replace('culture');

    $('#name').keyup(function () {
        let slug = $(this).val().toLowerCase().replace(/ /g, '-').replace(/[^\w-]+/g, '');
        $('#heading').val(slug);
    });
</script>
@endsection