@extends('admin.layouts.app', [
    'title' => 'Add new ' . $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' => 'Add new ' . $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">
                                </div>
                                <div class="col-12">
                                    <label class="form-label">Tag Line</label>
                                    <input type="text" class="form-control" name="tag_line">
                                </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">Active</option>
                                        <option value="Inactive">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/*">
                                </div>
                            </div>
                            <div class="card">
                                <div class="card-body">
                                    <div class="card-title">Video</div>
                                    <input type="file" name="video" class="form-control"
                                        accept="video/mp4,video/x-m4v,video/*">
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </form>
    </main>
@endsection

@push('script')
    <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);

                @stack('call-ajax')

                return false;
            }
        });
    </script>
@endpush