@extends('Frontend.Layouts.app')
@php
    $page_title = "Cart";
    $meta_description = "View all items in your cart";
@endphp
@section('page_content')

<section class="container mt-3 mb-5">
    <h5 class="text-center"> All books you have selected are shown below... </h5><br>
    <div class="table-responsive">
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>Img</th>
                    <th>Qty </th>
                    <th>Name </th>
                    <th>Price</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody class="display_cart_items"></tbody>
        </table>
    </div>

    <div class="mt-4">
        <h5 class="text-center"> Shipping Details </h5> <hr>
        <form class="_checkout_form" enctype="multipart/form-data">
            <section class="row">

                <div class="col-md-4">
                    <div class="form-group">
                        <label for=""> Name </label>
                        <input type="text" class="form-control" name="name" required placeholder="your name">
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="form-group">
                        <label for=""> Email </label>
                        <input type="email" class="form-control" name="email" required placeholder="your Email">
                        <span><small> Ensure Email is very correct because you will receive a mail of your order status and notifications... </small></span>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="form-group">
                        <label for=""> School name </label>
                        <input type="text" class="form-control" name="business_name" required placeholder="Name of your school">
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="form-group">
                        <label for=""> School Address </label>
                        <input type="text" class="form-control" name="address" required placeholder="School Address">
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="form-group">
                        <label for=""> Phone number </label>
                        <input type="tel" class="form-control" name="phone_number" required placeholder="Phone Number">
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="form-group">
                        <label for=""> Select Location <sup>*</sup> </label> <br>
                        <select name="location" class="form-control" required>
       <option value="Lagos">--- Which state is your school in? --- </option>
       <option value="Abia "> Abia </option>
       <option value="Adamawa "> Adamawa </option>
       <option value="Akwa Ibom "> Akwa Ibom </option>
       <option value="Anambra "> Anambra </option>
       <option value="Bauchi "> Bauchi </option>
       <option value="Bayelsa "> Bayelsa </option>
       <option value="Benue "> Benue </option>
       <option value="Borno "> Borno </option>
       <option value="Cross River "> Cross River </option>
       <option value="Delta "> Delta </option>
       <option value="Ebonyi "> Ebonyi </option>
       <option value="Edo "> Edo </option>
       <option value="Ekiti "> Ekiti </option>
       <option value="Enugu "> Enugu </option>
       <option value="FCT"> FCT</option>
       <option value="Gombe "> Gombe </option>
       <option value="Imo "> Imo </option>
       <option value="Jigawa "> Jigawa </option>
       <option value="Kaduna "> Kaduna </option>
       <option value="Kano "> Kano </option>
       <option value="Katsina "> Katsina </option>
       <option value="Kebbi "> Kebbi </option>
       <option value="Kogi "> Kogi </option>
       <option value="Kwara "> Kwara </option>
       <option value="Lagos " selected> Lagos </option>
       <option value="Nasarawa "> Nasarawa </option>
       <option value="Niger "> Niger </option>
       <option value="Ogun "> Ogun </option>
       <option value="Ondo "> Ondo </option>
       <option value="Osun "> Osun </option>
       <option value="Oyo "> Oyo </option>
       <option value="Plateau "> Plateau </option>
       <option value="Rivers "> Rivers </option>
       <option value="Sokoto "> Sokoto </option>
       <option value="Taraba "> Taraba </option>
       <option value="Yobe "> Yobe </option>
       <option value="Zamfara "> Zamfara </option>
       </select>
                    </div>
                </div>

                <div class="col-md-12 mt-3">
                    <div class="form-group">
                        <button type="submit" class="btn btn-outline-success btn-block"> Checkout now </button>
                    </div>
                </div>


            </section>
        </form>
    </div>

</section>

<script>
    $( function()
    {
        $('._checkout_form').on('submit', (e) => {
            e.preventDefault();
            if(! get_cart_items().length ) return alert('Your Cart is Empty');
            var form_data = $('._checkout_form').serialize();
            var cart_items = JSON.stringify( get_cart_items() );
            var data = `${form_data}&cart=${cart_items}&_token={{csrf_token() }}`;

            $.post( "{{ route('checkout')}}", data, ( response ) => {
             if( response.error ){
                return alert( response.error );
             }
              localStorage.clear();
              window.location.href = response.success;
           })
           .catch( (err) => {
              return alert( "An error has occured!" );
           });

        });

        function get_cart_items(){
            var cart = [];
            for(var key in  localStorage ){
               if( key.split('-')[0] == 'cart' ) {
                 cart.push( JSON.parse( localStorage.getItem( key ) ) );
                }
            }
            return cart;
        }; 

        //display cart items
            $('.display_cart_items').html('');
            var table_data ='';
            if( get_cart_items().length ){
                get_cart_items().forEach( (product,index) => {
                        table_data += 
                        `<tr id="cart_item_${product.id}">
                            <td> <a href="${product.url}"> <img style="width:100px; max-height:100px;" src="${product.featured_img}" class="img-thumbnail"> </a></td>
                            <td class=""> <input name="" class="product_qty" type="number" id="cart-${product.id}" value="${product.qty}" required style="width:80px;"> </td>
                            <td class=""> ${product.name} </td>
                            <td class=""> ${product.currency} ${product.discount_price ?? product.price } </td>
                            <td class=""> <a href="javascript:void(0)" id="cart-${product.id}" class="remove_cart_item btn btn-outline-danger btn-sm"> Remove </a> </td>
                        </tr>`;
                });
            }
            else{
                table_data += `<tr> <td colspan="5" class="text-center"> Cart is empty </td></tr>`;
            }
            $('.display_cart_items').html(`${table_data}`);

        $('.remove_cart_item').on('click', (e) => {
            e.preventDefault();
            var id = e.target.id;
            $("#cart_item_"+id).remove();
            localStorage.removeItem(id);
            window.location.reload();
        });

        //update product qty
        $('.product_qty').on('input', (e) => {
            e.preventDefault();
            var id = e.target.id;
            let data = JSON.parse(localStorage.getItem(id) );
            data['qty'] = e.target.value;
            localStorage.setItem(id, JSON.stringify(data) );
        });
    });
</script>

@stop