@extends('admin.layouts.app', [
    'title' => 'Edit ' . $tnm,
    'header' => true,
    'aside' => true,
])
@section('content')
    <main id="main" class="main">
        <form class="section dashboard" id="ajax-form">
            <div class="row">
                @include('admin.components.title-bar', [
                    'name' => 'Edit ' . $tnm,
                    'routeName' => $rnm,
                    'submit' => true,
                ])
                @stack('title-bar-form')
                <div class="col-12 col-sm-8">
                    <div class="card">
                        <div class="card-body">
                            <div class="row gy-2">
                                <div class="col-12">
                                    <label class="form-label">Name</label>
                                    <input type="text" class="form-control" name="name" value="{{ $apiCity->name }}">
                                </div>
                                <div class="col-6">
                                    <label class="form-label" for="is_pickup">Is Pickup</label>
                                    <input type="checkbox" class="form-check-input" name="is_pickup"
                                        {{ $apiCity->is_pickup == 1 ? 'checked' : '' }}>
                                </div>
                                <div class="col-6">
                                    <label class="form-label" for="is_drop">Is Drop</label>
                                    <input type="checkbox" class="form-check-input" name="is_drop"
                                        {{ $apiCity->is_drop == 1 ? 'checked' : '' }}>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-4">
                    <div class="position-sticky" style="top:11%;">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">
                                    Status
                                </h5>
                                <div>
                                    <select name="status" class="form-control">
                                        <option value="Active" {{ $apiCity->status == 'Active' ? 'selected' : '' }}>
                                            Active
                                        </option>
                                        <option value="Inactive" {{ $apiCity->status == 'Inactive' ? 'selected' : '' }}>
                                            Inactive</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        @if (Route::has($rnm . '.media'))
                            <div class="card">
                                <div class="card-body">
                                    <div class="card-title">Image</div>
                                    <input type="file" name="image" class="form-control" accept="image/*">
                                    @if ($apiCity->getImage('image', 'x200'))
                                        <div class="mt-3 position-relative">
                                            <button type="button"
                                                class="ml-1 btn btn-sm btn-danger shadow-sm position-absolute end-0 destroy-media"
                                                data-id="{{ $apiCity->id }}" data-media="image"><i
                                                    class="bi bi-trash"></i></button>
                                            <img class="img-account-profile img-fluid mb-2"
                                                src="{{ $apiCity->getImage('image', 'x200') }}" alt="">
                                        </div>
                                    @endif
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </form>
    </main>
@endsection

@push('script')
    @stack('media-script')
    @stack('text-area')
    <script>
        $("#ajax-form").validate({
            rules: {
                name: {
                    required: true,
                },
                status: {
                    required: true,
                },
            },
            messages: {
                name: "*Please enter name",
                status: "*Please select status",
            },
            submitHandler: function(form) {

                $(this).find('[type=submit]').attr('disabled', '');

                let formdata = new FormData(form);

                formdata.append("id", {{ $apiCity->id }});

                @stack('call-ajax')
                return false;
            }
        });
    </script>
@endpush