@extends('layouts.app')

@section('content')

<div class="container is-fluid" style="padding-top: 2%;">
    <div class="columns">
        <div class="column is-3">
            @include('partials._categories-menu')
        </div>
            @if(count($products))
               <div class="column is-4">
                   <div class="content">
                       <h3>Basket Items</h3>
                   </div>
                   @foreach($products as $product)
                       <div class="card" id="basket-item-{{$product->id}}">
                           <header class="card-header " style="cursor: pointer;">
                               <p class="card-header-title hvr-icon-hang">
                                   {{$loop->iteration}}. Product Reference: <span style="color:#01af40;"> {{$product->code}}</span>
                               </p>
                           </header>
                           <div class="card-content" style="display: none;">
                               <article class="media">
                                   <figure class="media-left">
                                       <p class="image is-128x128" >
                                           <img src="{{asset($product->images->first()->path)}}" style="max-height: 115%;">
                                       </p>
                                   </figure>
                                   <div class="media-content">
                                       <div class="content">
                                           <strong >{{config("coco.main.{$product->category->main}")}}</strong>
                                           <br>
                                           <strong style="font-size:14px;">{{$product->category->name}}</strong>
                                           <br>
                                           <strong>Ref:  <span style="color:#01af40;" class="is-pulled-right"> {{$product->code}}</span></strong>
                                           <br>
                                           <strong>Quantity: <span class="color-is-danger is-pulled-right">{{getQuantity($product->id,session('cart.products'))}}</span></strong>
                                           <br>
                                           <br>
                                           <form action="{{route('basket')}}"
                                                 method="post"
                                                 data-remote data-remove-node="basket-item-{{$product->id}}">
                                               {{csrf_field()}}
                                               <input type="hidden" name="id" value="{{$product->id}}">
                                               <a class="button is-danger is-small  is-outlined is-pulled-right remove-from-cart"> Remove</a>
                                               <div class="field is-grouped is-grouped-right" style="display: none;">
                                                   <p class="control">
                                                       <button type="submit" class="button is-warning is-small">
                                                           Yes
                                                       </button>
                                                   </p>
                                                   <p class="control">
                                                       <a class="button is-light is-small cancel-removing">
                                                           No
                                                       </a>
                                                   </p>
                                               </div>
                                           </form>
                                       </div>
                                   </div>
                               </article>
                           </div>
                       </div>
                       <br>
                   @endforeach
               </div>
                <div class="column is-5">

                    <div class="content">
                        <h3>Get A Quote</h3>
                    </div>
                    <div class="box">

                        <form action="{{route('get-quote')}}" method="post">
                            {{csrf_field()}}
                            <div class="columns">
                                <div class="column">
                                    <div class="field">
                                        <p class="control">
                                            <label for="name" class="label">Name</label>
                                            <input type="text" name="name" id="name" class="input is-expanded" required>
                                        </p>
                                    </div>
                                </div>
                                <div class="column">
                                    <div class="field">
                                        <p class="control">
                                            <label for="phone" class="label">Phone</label>
                                            <input type="text" name="phone" id="phone" class="input is-expanded" required>
                                        </p>
                                    </div>
                                </div>
                            </div>

                            <div class="columns">
                                <div class="column">
                                    <div class="field">
                                        <p class="control">
                                            <label for="mobile" class="label">Mobile</label>
                                            <input type="text" name="mobile" id="mobile" class="input is-expanded">
                                        </p>
                                    </div>
                                </div>
                                <div class="column">
                                    <div class="field">
                                        <p class="control">
                                            <label for="fax" class="label">Fax</label>
                                            <input type="text" name="fax" id="fax" class="input is-expanded">
                                        </p>
                                    </div>
                                </div>
                            </div>

                            <div class="columns">
                                <div class="column">
                                    <div class="field">
                                        <p class="control">
                                            <label for="email" class="label">Email</label>
                                            <input type="text" name="email" id="email" class="input is-expanded" required>
                                        </p>
                                    </div>
                                </div>
                                <div class="column">
                                    <label for="country" class="label">Country</label>
                                    <div class="select is-fullwidth">
                                        <select id="country" name="country">
                                            @include('partials._countries')
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="columns">
                                <div class="column">
                                    <div class="field">
                                        <p class="control">
                                            <label for="address" class="label">Address Line</label>
                                            <input type="text" class="input is-expanded" name="address"  id="address">
                                        </p>
                                    </div>
                                </div>
                            </div>

                            <div class="columns">

                                <div class="column">
                                    <label for="payment-type" class="label">Payment Type</label>
                                    <div class="select is-fullwidth">
                                        <select id="payment-type" name="payment_type">
                                            <option value="FOB">FOB</option>
                                            <option value="C&F">C&F</option>
                                            <option value="CIF">CIF</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="column">
                                    <label for="shipping-type" class="label">Shipping Type</label>
                                    <div class="select is-fullwidth">
                                        <select id="shipping-type" name="shipping_type">
                                            <option value="BY-SEA">By Sea</option>
                                            <option value="BY-AIR">By Air</option>
                                            <option value="DHL">DHL</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="columns">
                                <div class="column">
                                    <div class="field">
                                        <p class="control">
                                            <label for="message" class="label">Message</label>
                                            <textarea name="message" id="message" class="textarea is-fullwidth"></textarea>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="columns">
                                <div class="column">
                                    <div class="field">
                                        <p class="control">
                                            <button class="button is-maroon is-outlined is-fullwidth" type="submit">
                                                Get Quote
                                            </button>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                @else
              <div class="column is-9">

                  <div class="content">
                      <h4>Basket Items</h4>
                  </div>
                  <div class="hero is-light is-bold">
                      <div class="hero-body">
                          <div class="container">
                              <div class="content">
                                  <h5>Basket is empty</h5>
                                  <a href="/" class="button is-dark is-small is-outlined"> Browse Products</a>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
            @endif
    </div>
    <br>
</div>
@endsection

@section('js')
    <script>
        $(".card-header").click(function () {
            var card = $(this).closest(".card");

            card.find(".card-content").toggle(500);
        });

        $(".remove-from-cart").click(function () {
            var form = $(this).closest('form');
            $(this).hide();
            form.find(".field.is-grouped.is-grouped-right").toggle();
        });

        $(".cancel-removing").click(function () {

            var form = $(this).closest('form');
            form.find(".field.is-grouped.is-grouped-right").toggle();
            form.find(".remove-from-cart").toggle();
        });
    </script>
@endsection