@extends('dashboard.layouts.master')

@section('css')
@endsection

@section('breadcrumb')
    <div class="col-sm-6">
        <h4 class="page-title">قصاقيص</h4>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}">{{trans('labels.dashboard')}}</a></li>
            <li class="breadcrumb-item active">قصاقيص </li>
        </ol>
    </div>
@endsection

@section('content')
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <form action="{{route('admin.shorts.store')}}" method="post">
                        @csrf
                        <div class="form-group">
                            <label>الاسم</label>
                            <input type="text" class="form-control @error('title') is-invalid @enderror" name="title" value="{{ old('title') }}">
                            @error('title')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label>iframe</label>
                            <input type="text" class="form-control @error('file') is-invalid @enderror" name="file" value="{{ old('file') }}">
                            @error('file')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label>تاريخ النشر</label>
                            <input type="datetime-local" class="form-control @error('published_at') is-invalid @enderror" name="published_at" value="{{ old('published_at') }}">
                            @error('published_at')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                        <div class="col-md-12">
                            <div class="form-group row">
                                <label for="is_active" class="col-lg-3 col-form-label">متاح</label>
                                <div class="col-lg-9">
                                    <input type="checkbox" id="switch1" name="is_active" switch="none" value="1">
                                    <label for="switch1" data-on-label="متاح" data-off-label="ايقاف"></label>
                                    @error('is_active')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <button class="btn btn-primary waves-effect waves-light" type="submit" aria-haspopup="true" aria-expanded="false">
                                {{trans('labels.create')}}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div> <!-- end col -->
    </div>
@endsection

@section('script')

<script type="text/javascript">
    $('#gov_id').change(function() {
            handleAreas($(this).val())
        });

        function handleAreas(gov) {
           

            let url = '/get-cities-by-governorate/' + gov;
            $.ajax({
                url: url,
                method: 'get',
                contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                success: function(response) {
                    $('#city_id').empty();
                    // $('#city').empty();
                    // $('select[name=area]').append(`
                    //         <option value="">اختر المدينة </option>
                    //         `);
                    $.each(response, function(index, city) {
                         $('#city_id').append(`<option value="${city.id}">${city.city_name_ar}</option>`);
                    });

                    console.log(response);
                },
                error: function() {
                    return false; //this will prevent to go to next step
                }
            });
        }
</script>
@endsection