@extends('plate')
@section('content')
    <div class="row">
    @if(!$get)

        <h4 class="text-danger">No Data Available</h4>

        @else
        <div class="col-md-4 mb-md-0 mb-5">
            <br>
            <div class="card"  style="opacity:0.94">
                <h5 class="card-header elegant-color text-center py-4">
                    <strong style="color:#ffcb09;"><i class="fa fa-pencil"></i> Edit Your Ad</strong>
                </h5>
                <div class="card-body">
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                    @if(session('response'))
                            <div class="alert alert-success">
                                {{session('response')}}
                            </div>
                        @endif
                    <form enctype="multipart/form-data" action="{{route('myservice.update',['id'=>$get->id])}}" method="post">
                        {{csrf_field()}}
                        <br>
                        <div class="row">
                            <div class="col-md-12">
                                <label>Category</label>
                                <select class="mdb-select colorful-select dropdown-dark" name="cat_id" required="" id="cat_id">
                                    <option value="" disabled selected>Choose your option</option>
                                    {{--@foreach($cat as $cats)--}}
                                    {{--<option value="{{$cats->cat_id}}">{{$cats->cat_name}}</option>--}}
                                    {{--@endforeach--}}
                                    <option value="kwik">Kwik Advertizer</option>
                                    <option value="mini_kwik">Mini Kwik Advertizer</option>
                                </select>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <label>Format</label>
                                <select class="mdb-select colorful-select dropdown-dark" name="p_type" required="" id="color">
                                    <option value="" disabled selected>Choose your option</option>
                                    <option value="BLACK & WHITE">BLACK & WHITE</option>
                                    <option value="COLOR">COLOR</option>
                                </select>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <label>Size</label>
                                <select class="browser-default custom-select pubsize" name="size" required>
                                    <option></option>
                                </select>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <div class="md-form">
                                    <label for="cost">Cost</label>
                                    <input type="text" id="cost" name="cost" class="form-control" readonly placeholder="0.00">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">

                                <div class="md-form">
                                    <div class="file-field">
                                        <a class="btn-floating elegant-color-dark mt-0 float-left">
                                            <i class="fa fa-paperclip amber-text" aria-hidden="true"></i>
                                            <input type="file" name="media" id="subject" required>
                                        </a>
                                        <div class="file-path-wrapper">
                                            <input class="file-path validate" type="text" placeholder="upload file image / pdf" readonly>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <br>

                        <div class="row">
                            <div class="col-md-12">
                                <label>Publication Date</label>
                                <select class="mdb-select colorful-select dropdown-dark" name="pub_date" required="" id="color">
                                    <option value="" disabled selected>Choose your option</option>
                                    @foreach($dates as $time)
                                        <option value="{{$time->date}}">
                                            @php
                                                $date = \Carbon\Carbon::parse($time->date)->format('l');
                                            @endphp
                                            {{$time->date}} ,{{$date}}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>


                        <div class="text-center text-md-center">
                            <button class="btn btn-dark" type="submit"> Save</button>
                        </div>
                    </form>
                    <div class="status"></div>
                </div>
            </div>
        </div>

        @if(pathinfo($get->media, PATHINFO_EXTENSION) == 'png' || pathinfo($get->media, PATHINFO_EXTENSION) == 'jpg' || pathinfo($get->media, PATHINFO_EXTENSION) == 'jpeg')
        <div class="col-md-7">
            <br>

            <img src="{{asset('storage/avatars/'.$get->media)}}" class="img-fluid z-depth-1 img-thumbnail" alt="cool"
                             height="400px" width="750px"/>
        </div>
         @else
                <div class="col-md-7">
                    <br>

                    <a href="/storage/avatars/{{$get->media}}" class="btn btn-dark">
                      Open
                      <i class="fa fa-eye fa-2x" style="color:#ffcb09"></i>
                    </a>
             <a href="/storage/avatars/{{$get->media}}" class="btn btn-dark" download >
               download
               <i class="fa fa-download fa-2x" style="color:#ffcb09"></i>
             </a>
</div>
@endif
@endif
</div>
@endsection

@push('my-script')

    <script>
        $('#cat_id').on('change',function () {
            var cat_id = $(this).val();
            var route = '{{ route("category_response",':id') }}';

            $('.pubsize').html("");

            route = route.replace(':id', cat_id);
            $.get(route,function (data) {
                $.each(data, function(i){
                    $('.pubsize').append(
                        '<option value="">'+'</option>'+
                        '<option value="'+ data[i].p_size+'">'+ data[i].p_size +'</option>')
                });
            })

        })
        $('#color').on('change',function () {
            $('#cost').val("");
            $('.pubsize').prop('selectedIndex',0);
        })
        $('.pubsize').on('change',function () {
            var value = $(this).val();
            var type  = $('#cat_id').val();
            var color  = $('#color').val();

            var route = '/price/response/'+type +'/'+value+'/'+color;
            $.get(route,function (data) {
                console.log(data)
                $('#cost').val(data.cost);
            })
        })
    </script>
    @endpush

@push('create')
    active
    @endpush