@extends('layouts.app')

@section('content')

<div class="card">
    <div class="card-header">
        <h3>Edit Destination</h3>
    </div>
    <div class="card-body">
        <form action="{{ route('holiday.destinations.update', $destination->id) }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            <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="{{ $destination->name }}" required>
                    </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="{{ $destination->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">{{ $destination->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="{{ $destination->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="{{ $destination->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="{{ $destination->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="{{ $destination->detail_subheading }}">
                    </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" class="form-control">{!! $destination->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" class="form-control">{!! $destination->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" class="form-control">{!! $destination->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" class="form-control">{!! $destination->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" class="form-control">{!! $destination->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" class="form-control">{!! $destination->culture !!}</textarea>
                    </div>
                </div>

                <hr>
                <h5>Images</h5>

                <div class="row mb-3">
                    <label class="col-md-3 col-form-label">Photo</label>
                    <div class="col-md-6">
                        @if($destination->photo)
                            <img src="{{ asset('storage/' . $destination->photo) }}" width="150" class="d-block mb-2">
                        @endif
                        <input type="file" name="photo" class="form-control">
                    </div>
                </div>

                <div class="row mb-3">
                    <label class="col-md-3 col-form-label">Banner</label>
                    <div class="col-md-6">
                        @if($destination->banner)
                            <img src="{{ asset('storage/' . $destination->banner) }}" width="250" class="d-block mb-2">
                        @endif
                        <input type="file" name="banner" class="form-control">
                    </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="{{ $destination->meta_title }}">
                    </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="{{ $destination->meta_keywords }}">
                    </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"
                            rows="3">{{ $destination->meta_description }}</textarea>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-3"></div>
                    <div class="col-md-6">
                        <button class="btn btn-primary">Update</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