@extends('layouts.admin')

@section('title') Create Advertisment @endsection

@section('page_title') Create New Advertisment @endsection

@section('content')
@push('page_style')
 <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endpush

    <!-- Basic multiple Column Form section start -->
    <section id="multiple-column-form">
        <div class="row">
            <div class="col-12">

    @if ($errors->any())
        @foreach ($errors->all() as $error)
            <div>{{$error}}</div>
        @endforeach
    @endif
                <div class="card">
                    <form method="POST" action="{{ route('advertisment.store') }}" autocomplete="off" enctype="multipart/form-data">
                        @csrf
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6 col-12">
                                    <div class="form-group">
                                        <label class="form-label" for="title">Title <span class="text-danger asteric-sign">&#42;</span></label>
                                        <input id="title" type="text" class="form-control {{ $errors->has('title') ? ' is-invalid' : '' }}" name="title" value="{{ (old('title')) ? old('title') : $advertismentObject->title }}" placeholder="Enter title">
                                        @if ($errors->has('title'))
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $errors->first('title') }}</strong>
                                            </span>
                                        @endif
                                        
                                    </div>
                                </div>
                                <div class="col-md-6 col-12">
                                    <div class="form-group">
                                        <label class="form-label" for="price">Price <span class="text-danger asteric-sign">&#42;</span></label>
                                        <input id="price" type="text" class="form-control {{ $errors->has('price') ? ' is-invalid' : '' }}" name="price" value="{{ old('price') ? old('price') : $advertismentObject->price }}" placeholder="Enter price">
                                        @if ($errors->has('price'))
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $errors->first('price') }}</strong>
                                            </span>
                                        @endif
                                        
                                    </div>
                                </div>

                            

                                <div class="col-md-12 col-12">
                                    <div class="form-group">
                                        <label class="form-label" for="description">Description <span class="text-danger asteric-sign">&#42;</span></label>
                                       
                                        <textarea  id="description" name="description" class="form-control {{ $errors->has('description') ? ' is-invalid' : '' }}" placeholder="Enter Description">{{ old('price') ? old('price') : $advertismentObject->description }}</textarea> 
                                        @if ($errors->has('description'))
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $errors->first('description') }}</strong>
                                            </span>
                                        @endif
                                        
                                    </div>
                                </div>

                                <div class="col-md-6 col-12">
                                    <div class="form-group">
                                        <label class="form-label" for="expire_at">Expire At <span class="text-danger asteric-sign">&#42;</span></label>
                                        <input id="expire_at" type="text" class="form-control date {{ $errors->has('expire_at') ? ' is-invalid' : '' }}" name="expire_at" value="{{ old('expire_at') ? old('expire_at') : $advertismentObject->expire_at }}">
                                        @if ($errors->has('expire_at'))
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $errors->first('expire_at') }}</strong>
                                            </span>
                                        @endif
                                        
                                    </div>
                                </div>

                                <div class="col-md-6 col-12">
                                    <div class="form-group">
                                        <label class="form-label" for="role">Category <span class="text-danger asteric-sign">&#42;</span></label>
                                        <select class="form-control select2-multiple {{ $errors->has('category_id') ? ' is-invalid' : '' }}" id="category" name="category_id[]" multiple="multiple">
                                            <option value="">Select Category</option>
                                            @foreach($category as $key => $roleObj)
                                                
                                                <option value="{{$roleObj->id}}"{{old('category_id') == $roleObj->id ? "selected": ""}}>{{ $roleObj->title }}</option>
                                            @endforeach
                                        </select>
                                        @if ($errors->has('category_id'))
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $errors->first('category_id') }}</strong>
                                            </span>
                                        @endif
                                    </div>
                                </div>

           


                                <div class="col-md-6 col-12">
                                    <div class="form-group">
                                        <label class="form-label" for="payment_method">Payment Method <span class="text-danger asteric-sign">&#42;</span></label>
                                        <select class="form-control select2-multiple {{ $errors->has('payment_method') ? ' is-invalid' : '' }}" multiple="multiple"   id="select2Multiple" name="payment_method[]">
                                            <option value="">Select Payment Method</option>
                                            @foreach($paymentMethods as $key => $method) 
                                                <option value="{{$method->id}}"{{old('payment_method') == $method->id ? "selected": ""}}>{{ $method->title }}</option>
                                            @endforeach
                                        </select>
                                        @if ($errors->has('payment_method'))
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $errors->first('payment_method') }}</strong>
                                            </span>
                                        @endif
                                    </div>
                                </div>

                                <div class="col-md-6 col-12">
                                    <label class="form-label" for="photos">Photos</span></label><br>
                                    <div class="input-group">
                                        <div class="custom-file">
                                            <input type="file" class="custom-file-input" id="photos" name="images[]" multiple>
                                            <label class="custom-file-label" for="photos">Choose files</label>
                                        </div>
                                        <!-- <div class="input-group-append">
                                            <span class="input-group-text">Upload</span>
                                        </div> -->
                                    </div>
                                </div>

                                <div class="col-md-6 col-12">
                                    <div class="form-group">
                                        <label class="form-label" for="country">Country <span class="text-danger asteric-sign">&#42;</span></label>
                                        <select class="form-control select2-multiple {{ $errors->has('country_ids') ? ' is-invalid' : '' }}" multiple="multiple"   id="country" name="country_ids[]">
                                            <option value="">Select Payment Method</option>
                                            @foreach($countries as $key => $country) 
                                                <option value="{{$country->id}}"{{ $country->isCountrySelected($advertismentObject->id) ? "selected": ""}}>{{ $country->name }}</option>
                                            @endforeach
                                        </select>
                                        @if ($errors->has('country_ids'))
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $errors->first('country_ids') }}</strong>
                                            </span>
                                        @endif
                                    </div>
                                </div>


                                <div class="col-md-6 col-12">
                                    <div class="form-group">
                                        <label class="form-label" for="state">State <span class="text-danger asteric-sign">&#42;</span></label>
                                        <select class="form-control select2-multiple {{ $errors->has('state_ids') ? ' is-invalid' : '' }}" multiple="multiple"   id="state" name="state_ids[]">
                                             @foreach($states as $key => $state) 
                                                <option value="{{$state->id}}"{{ $state->isStateSelected($advertismentObject->id) ? "selected": ""}}>{{ $state->name }}</option>
                                            @endforeach
                                        </select>
                                        @if ($errors->has('state_ids'))
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $errors->first('state_ids') }}</strong>
                                            </span>
                                        @endif
                                    </div>
                                </div>


                                <div class="col-md-6 col-12">
                                    <div class="form-group">
                                        <label class="form-label" for="city">City <span class="text-danger asteric-sign">&#42;</span></label>
                                        <select class="form-control select2-multiple {{ $errors->has('cities_ids') ? ' is-invalid' : '' }}" multiple="multiple"   id="city" name="cities_ids[]">
                                            <option value="">Select Payment Method</option>
                                            @foreach($cities as $key => $city) 
                                                <option value="{{$city->id}}"{{ $city->isCitySelected($advertismentObject->id) ? "selected": ""}}>{{ $city->name }}</option>
                                            @endforeach
                                        </select>
                                        @if ($errors->has('cities_ids'))
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $errors->first('cities_ids') }}</strong>
                                            </span>
                                        @endif
                                    </div>
                                </div>

                               
                            </div>
                        </div>
                        <div class="card-footer">
                            <button type="Submit" class="btn btn-primary me-1">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
    <!-- Basic Floating Label Form section end -->

    @push('page_script')
    <script src="{{ asset('plugins/bs-custom-file-input/bs-custom-file-input.min.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script> 
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script type="text/javascript">

        $('.date').datepicker({  
            format: 'yyyy-mm-dd' 
        }); 
    
        $(function () {
                bsCustomFileInput.init();
        });

        $(document).on('change', "#photos", function(event){
                if(this.files[0]){
                    let fileSize = this.files[0].size;
                    let fileSizeInKb = fileSize / 1024;
                    let fileSizeLimit = 500; // In KB

                    if (fileSizeInKb > fileSizeLimit) {
                        $(this).val('');
                        toastr.error("File may not be greater than 500 KB.", 'Error!', {closeButton: true, tapToDismiss: false});
                    
                        return false;
                    }
                }    
        });

        function fetchState(idCountry){
            $.ajax({
                    url: "{{route('user.fetch-states')}}",
                    type: "POST",
                    data: { 
                        country_id: idCountry, 
                        _token: '{{csrf_token()}}' 
                    }, 
                    dataType: 'json', 
                    success: function (result) { 
                        $('#state').html('<option value="">-- Select State --</option>');

                        $.each(result.states, function (key, value) { 
                            $("#state").append('<option value="' + value 
                                .id + '">' + value.name + '</option>'); 
                        }); 
                        $('#city').html('<option value="">-- Select City --</option>');

                    }

                });
        }


        function fetchCities(idState){
            $.ajax({
                url: "{{route('user.fetch-city')}}",
                type: "POST",
                data: { 
                    state_id: idState, 
                    _token: '{{csrf_token()}}'
                }, 
                dataType: 'json', 
                success: function (res) {
                    $('#city').html('<option value="">-- Select City --</option>');
                    $.each(res.cities, function (key, value) {
                        $("#city").append('<option value="' + value
                            .id + '">' + value.name + '</option>');

                    }); 
                } 
            });
        }

        $(document).ready(function() {
            // Select2 Multiple
            $('.select2-multiple').select2({
                placeholder: "Select",
                allowClear: true
            });
            
            //get state
            var idCountry = $('#country').val();
             fetchState(idCountry); 

              //get cities
            var idState = $('#state').val();
            fetchCities(idState); 
        });


        $('#country').on('change', function(event) {
            event.preventDefault();
            var idCountry = $(this).val();
            fetchState(idCountry);
          
        });

        $('#state').on('change', function(event) {
            var idState = $(this).val();
            $("#city").html('');
            fetchCities(idState);

            
        });

    </script> 
   
   
    @endpush

@endsection