@extends('layouts.master')

@section('meta-tag')
    <meta name="description" content="Buat Destinasi Baru">
@endsection

@section('title', "Destinasi Baru")
@section('subtitle', "Tambahkan Destinasi Baru")
@push('styles')
    <style>
        .ck-editor__editable {min-height: 500px;}
    </style>
@endpush
@section('content')
    <section class="section">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">Tambahkan Destinasi</h4>
            </div>
            <div class="card-body">
                <form id="create" enctype="multipart/form-data" method="POST">
                    @csrf
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="name" class="form-label">Nama</label>
                                <input type="text" class="form-control" id="name" name="name"
                                       placeholder="Nama" value="{{ $destination->name }}"/>
                            </div>
                            <div class="mb-3">
                                <label for="address" class="form-label">Tujuan</label>
                                <input type="text" class="form-control" id="address" name="address"
                                       placeholder="Tujuan" value="{{ $destination->address }}"/>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="image" class="form-label">Gambar</label>
                                <input type="file" class="form-control" id="image" name="image" accept="image/*">
                                <small class="text-muted"><span class="text-danger">*</span>Kosongkan jika tidak ingin mengubah gambar</small>
                                <br>
                                @if($destination->image)
                                    <small class="text-muted">Gambar saat ini : </small>
                                    <img src="{{ asset('storage/destination/' . $destination->image) }}" alt="{{ $destination->name }}" class="img-fluid mt-2">
                                @endif
                            </div>
                            <div class="mb-3">
                                <label for="status" class="form-label">Status</label>
                                <select name="status" id="status" class="form-select">
                                    <option value="1" @if($destination->status == 1) selected @endif>Aktif</option>
                                    <option value="0" @if($destination->status == 0) selected @endif>Tidak Aktif</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="editor" class="form-label">Deskripsi</label>
                        <textarea class="form-control" id="editor" name="description"
                                  rows="20"
                                  placeholder="Deskripsi Destinasi">{{ $destination->description }}</textarea>
                    </div>
                    <button type="submit" class="btn btn-primary" id="submit">Submit</button>
                </form>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
            integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script src="https://cdn.ckeditor.com/ckeditor5/34.2.0/classic/ckeditor.js"></script>
    <script src="/assets/static/js/pages/ckeditor.js"></script>
    <script>
        $('#submit').on('click', function (e) {
            e.preventDefault();

            let formData = new FormData($('#create')[0]);
            formData.append('description', myeditor.getData());
            formData.append('_method', 'PUT');
            $.ajax({
                url: '{{ route('admin.destination.update', $destination->id) }}',
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                success: function (response) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Success!',
                        text: response.message,
                    }).then(() => {
                        window.location.href = '{{ route('admin.destination.index') }}';
                    });
                },
                error: function (xhr, status, error) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error!',
                        text: xhr.responseJSON.message,
                    });
                }
            });
        });
    </script>
@endpush