@extends('layouts.master')

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

@section('title', "Armada Baru")
@section('subtitle', "Tambahkan Armada 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 Armada</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="merk_model" class="form-label">Merk/Model</label>
                                <input type="text" class="form-control" id="merk_model" name="merk_model"
                                       placeholder="Merk/Model">
                            </div>
                            <div class="mb-3">
                                <label for="code" class="form-label">Kode Armada</label>
                                <input type="text" class="form-control" id="code" name="kode_armada"
                                       placeholder="Kode Armada">
                            </div>
                            <div class="mb-3">
                                <label for="tahun" class="form-label">Tahun</label>
                                <input type="number" class="form-control" id="tahun" name="tahun" placeholder="Tahun">
                            </div>
                            <div class="mb-3">
                                <label for="price" class="form-label">Harga Sewa</label>
                                <input type="number" class="form-control" id="price" name="price"
                                       placeholder="Harga Sewa">
                            </div>
                            <div class="mb-3">
                                <label for="overtime" class="form-label">Overtime</label>
                                <input type="text" class="form-control" id="overtime" name="overtime" placeholder="5%">
                            </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/*">
                            </div>
                            <div class="mb-3">
                                <label for="status" class="form-label">Status</label>
                                <select name="status" id="status" class="form-select">
                                    <option value="1">Tersedia</option>
                                    <option value="0">Tidak Tersedia</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="type" class="form-label">Type</label>
                                <select name="type" id="type" class="form-select">
                                    <option value="bis">Bis</option>
                                    <option value="elf">Elf</option>
                                    <option value="mobil">Mobil</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="total_seat" class="form-label">Total Seat</label>
                                <input type="number" class="form-control" id="total_seat" name="total_seat"
                                       placeholder="Total Seat">
                            </div>
                            <div class="mb-3 d-flex flex-column gap-3">
                                <div class="d-flex justify-content-between align-items-center">
                                    <label for="bbm" class="form-label mb-0">Include BBM</label>
                                    <div class="d-flex gap-2">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="bbm" id="bbm-yes" value=true>
                                            <label class="form-check-label" for="bbm-yes">Iya</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="bbm" id="bbm-no" value=false>
                                            <label class="form-check-label" for="bbm-no">Tidak</label>
                                        </div>
                                    </div>
                                </div>

                                <div class="d-flex justify-content-between align-items-center">
                                    <label for="driver" class="form-label mb-0">Include Driver</label>
                                    <div class="d-flex gap-2">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="driver" id="driver-yes" value=true>
                                            <label class="form-check-label" for="driver-yes">Iya</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="driver" id="driver-no" value=false>
                                            <label class="form-check-label" for="driver-no">Tidak</label>
                                        </div>
                                    </div>
                                </div>
                            </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 Armada"></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());

            $.ajax({
                url: '{{ route('admin.armada.store') }}',
                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.armada.index') }}';
                    });
                },
                error: function (xhr, status, error) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error!',
                        text: xhr.responseJSON.message,
                    });
                }
            });
        });
    </script>
@endpush