@extends('layouts.master')

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

@section('title', "Armada Baru")
@section('subtitle', "Ubah Armada 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">Ubah Armada Armada</h4>
            </div>
            <div class="card-body">
                <form id="update" enctype="multipart/form-data" method="POST">
                    <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" value="{{ $armada->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" value="{{ $armada->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" value="{{ $armada->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" value="{{ $armada->price }}">
                            </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%" value="{{ $armada->overtime }}">
                            </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($armada->status == 1) selected @endif>Tersedia</option>
                                    <option value="0" @if($armada->status == 0) selected @endif>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" @if($armada->type == 'bis') selected @endif>Bis</option>
                                    <option value="elf" @if($armada->type == 'elf') selected @endif>Elf</option>
                                    <option value="mobil" @if($armada->type == 'mobil') selected @endif>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" value="{{ $armada->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 @if($armada->bbm) checked @endif>
                                            <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 @if(!$armada->bbm) checked @endif>
                                            <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 @if($armada->driver) checked @endif>
                                            <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 @if(!$armada->driver) checked @endif>
                                            <label class="form-check-label" for="driver-no">Tidak</label>
                                        </div>
                                    </div>
                                </div>
                            </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($armada->image)
                                    <small class="text-muted">Gambar saat ini : </small>
                                    <img src="{{ asset('storage/armada/' . $armada->image) }}" alt="{{ $armada->merk_model }}" class="img-fluid mt-2">
                                @endif
                            </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">{{ $armada->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($('#update')[0]);
            formData.append('description', myeditor.getData());
            formData.append('_method', 'PUT');
            $.ajax({
                url: '{{ route('admin.armada.update', $armada->id) }}',
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                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