@extends('plate')
@section('content')
<div class="fadeIn animated">
  <div class="row">
    <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;">Place Your Ad Here</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>
          @elseif(session('data'))
          <strong class="text-success">{{session('data')}}</strong>
          @elseif(session('error'))
          <strong class="text-danger">{{session('error')}}</strong>
          @endif

          <form id="contact-form" name="contact-form" enctype="multipart/form-data" action="{{route('myservice.store')}}" 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 type="submit" class="btn elegant-color-dark btn-rounded">Save</button>
              <a class="btn btn-outline-dark waves-effect btn-rounded" data-toggle="modal" data-target="#contactUs" href="#" style="color: black !important;">Help</a>
            </div>
          </form>
          <hr>
          <p>
            {{--By Placing--}}
            {{--<em>Your Ad</em> you agree to our--}}
            {{--<a href="#">terms of service</a>--}}
            <br> &copy; kwikadvertizer
          </p>
        </div>
      </div>
    </div>
    <div class="col-md-8 mb-md-0 mb-6" >
      <br>
      <div class="card" style="opacity:0.94;" id="ad_div">
        <h5 class="card-header elegant-color text-center py-4">
        <strong class="amber-text">Your Ads</strong>
    </h5>
        <div class="card-body">
          {{--<table class="table  responsive  table-hover " id="user_advert">--}}
            {{--<!--Table head-->--}}
            {{--<thead>--}}
              {{--<tr>--}}
                {{--<th>CATEGORY</th>--}}
                {{--<th>AD SIZE</th>--}}
                {{----}}
                {{--<th>LOCATION</th> --}}
                {{--<th>COST--}}
                {{--</th>--}}
                {{--<th>CODE</th>--}}
                {{--<th>DATE</th>--}}
                {{--<th>STATUS</th>--}}
              {{--</tr>--}}
            {{--</thead>--}}

            {{--<tbody>--}}

            {{--</tbody>--}}

          {{--</table>--}}
                {!! $dataTable->table([],true) !!}
            </div>
          <hr>
          <div>
            <ul>

              <a class="btn  btn-sm btn-dark" href="#"></a> <small><b>A</b>waiting payment</small>

              <a class="btn btn-sm btn-warning" href="#"></a> <small><b>A</b>pproval pending</small>

              <a class="btn btn-sm btn-danger" href="#"></a> <small><b>R</b>ejected advert</small>

              <a class="btn btn-sm btn-success" href="#"></a> <small><b>A</b>pproved advert</small>
            </ul>
          </div>
        </div>

      </div>
    </div>
  </div>
  <br>


@endsection


@push('t-script')

@endpush
@include('users.user-modal')
@push('my-script')
    {!! $dataTable->scripts() !!}
  <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