@extends('layouts.app')

@section('content')
<section class="Rectangle-111">
    <div class="breadcrumbContact"></div>
</section>
<section class="contact py-5">
    <div class="container">
        <div class="text-center my-5">
            <h1>My Cart</h1>
            <h2>WE ARE HERE TO LISTEN TO YOU</h2>
            <p>In order to obtain a quote as quickly as possible, please indicate your contact details</p>
        </div>
        <div class="card-content">
            <div id="wrapper">
                @if($message = Session::get('success'))
                <div class="alert alert-success">
                    <p>{{ $message }}</p>
                </div>
                @endif
                @if(Cart::getContent()->count()!= 0)
                @foreach ($content as $item)
                <hr><br>
                <div class="row">
                    <div class="col-md-4"><img
                            src="{{asset(helper::prod_img_default($item->associatedModel->id)->img)}}" alt=""
                            class="cart-img"></div>
                    <div class="col-md-4 ">
                        <h2 class="bold">{{ $item->name }}</h2>
                        <h2> Quantity: {{ $item->quantity }}</h2>
                    </div>

                    <form action="{{ route('panier.destroy', $item->id) }}" method="POST">
                        @csrf
                        @method('DELETE')
                        <div class="col-md-4"> <button type="submit"
                                class="btn mw-164 btn-black font-weight-bold px-4 py-2 cartbtn">Delete product</button>
                        </div>
                    </form>
                </div>
                @endforeach
                <hr><br>

                @else
                <span class="card-title center-align">EMPTY SHOPPING CART
                There are no more items in your cart</span>
                @endif
            </div>
            <div id="loader" class="hide">
                <div class="loader"></div>
            </div>
        </div>
        @if(Cart::getContent()->count()!= 0)
        <form id="contact-form" action="{{ route('order.store')}}" method="POST">
            @csrf
            <div id="inputs" class="row">
                <div class="col-md-6">
                    <input class="w-100  form-control" type="text" name="company" placeholder="Company name*" required>
                    <input class="w-100 mt-4 form-control" type="text" name="name" placeholder="Full Name*" required>


                </div>
                <div class="col-md-6">
                    <input class="w-100 form-control" type="email" name="email" placeholder="Email*" required>
                    <input class="w-100 mt-4 form-control" type="text" name="phone" placeholder="Phone number*"
                        required>
                </div>
            </div>

            <div id="success-msg" class="d-none text-center px-5 col-lg-8 offset-lg-2" style="min-height: 144px">
                <img class="mb-3" height="85px" src="{{ asset('img\svg\Validation_Icon.svg') }}" alt="">
                <h4>Thanks for contacting the InterStore team.</h4>
                <h6>We will be in touch with you shortly.</h6>
            </div>

            <div class="text-center mt-4">
             
                <a href="" class="btn mw-164 btn-black font-weight-bold px-4 py-2">Vider mon panier</a>
                <a href="{{URL::previous()}}" class="btn mw-164 btn-black font-weight-bold px-4 py-2">Continuer mes
                    achats</a>
                <button id="submit" type="submit" class="btn mw-164 btn-black font-weight-bold px-4 py-2"
                    style="height: 42px !important;"><span>Commander</span></button>


            </div>

        </form>
        @endif
    </div>
</section>

@endsection

@section('javascript')
<script>
    $(".del-data").click(function(event){
      event.preventDefault();

      let name = $("input[name=name]").val();
      let email = $("input[name=email]").val();
      let mobile_number = $("input[name=mobile_number]").val();
      let message = $("input[name=message]").val();
      let _token   = $('meta[name="csrf-token"]').attr('content');

      $.ajax({
        url: "/ajax-request",
        type:"POST",
        data:{
          name:name,
          email:email,
          mobile_number:mobile_number,
          message:message,
          _token: _token
        },
        success:function(response){
          console.log(response);
          if(response) {
            $('.success').text(response.success);
            $("#ajaxform")[0].reset();
          }
        },
       });
  });
</script>

@endsection