@extends('layouts.guest')
@section('title', 'mycart')

<style>
    body{
        direction: rtl !important;
    }
    
.table{
    text-align: center;
    
}
.table>thead>tr>th {
    text-align: center;
}
.navbar-nav {
    float: right;
    margin: 0;
}
.main-cart{
    font-size: 30px !important;
    position: fixed;
    top: -16px;
    left: 1px;
    z-index: 10000000000000000000;
}
.cart_num{
        color: red;
    background: yellow;
    color: black;
    border-radius: 50px;
    /* width: 70px; */
    position: absolute;
    right: -18px;
    top: -3px;
    font-size: 21px;
    width: 32px;
}
</style>
@section('content')
<a href="{{action('\Modules\ProductCatalogue\Http\Controllers\ProductCatalogueController@myCart')}}">
<h1 class="btn btn-success main-cart"><i class="fas fa-shopping-cart"></i> <span class="cart_num">{{Cart::count()}}</span></h1>
</a>


<!-- Main content -->
<section class="content pt-0">
     <div class="container">
@if (\Session::has('success'))
    <div class="alert alert-success">
        <ul>
            <li>{!! \Session::get('success') !!}</li>
        </ul>
    </div>
@endif
@if (\Session::has('error'))
    <div class="alert alert-danger">
        <ul>
            <li>{!! \Session::get('error') !!}</li>
        </ul>
    </div>
@endif
         <form action="{{action('\Modules\ProductCatalogue\Http\Controllers\ProductCatalogueController@sell')}}" method="POST">
             @csrf
        @include('productcatalogue::catalogue.cart_table')
        <div class="row">
            <div class="form-group">
                <label>نوع الخدمة</label>
                <select name="types_of_service_id" class="form-control">
                    <option value="">اختر الخدمة </option>
                    @foreach($services as $row)
                        <option value="{{$row->id}}">{{$row->name}}</option>
                    @endforeach
                </select>
            </div>
            <!--
            <div class="form-group">
                <label>نوع الخدمة</label>
                <select name="res_table_id" class="form-control">
                    <option value="">اختر الطاولة </option>
                    @foreach($res_tables as $row)
                        <option value="{{$row->id}}">{{$row->name}}</option>
                    @endforeach
                </select>
            </div>
            -->
              <div class="form-group">
                <label for="exampleInputEmail1">اسم العميل  </label><sapn style="color:red">*</sapn>
                <input type="text" required class="form-control" name="customer_name" placeholder="اسم العميل ">
                <small id="emailHelp" class="form-text text-muted">من فضلك ادخل اسمك</small>
              </div>
              <div class="form-group">
                <label for="exampleInputPassword1">رقم موبايل </label><sapn style="color:red">*</sapn>
                <input type="text" required name="customer_phone" class="form-control" id="exampleInputPassword1" placeholder="رقم الموبايل">
              </div>
              <div class="form-group">
                <label for="exampleInputPassword1">مكان تسليم الطلب  </label>
                <input type="text"  name="customer_address"  class="form-control" id="exampleInputPassword1" placeholder="مكان تسليم الطلب  ">
              </div>
              
              
      
        </div>
        <button type="submit" class="btn btn-primary">طلب</button>
        </form>
     </div>
    <div class='scrolltop no-print'>
        <div class='scroll icon'><i class="fas fa-angle-up"></i></div>
    </div>
</section>


@stop
@section('javascript')
<script type="text/javascript">

    (function($) {
    $(document).ready( function() {
        //Set global currency to be used in the application
        __currency_symbol = $('input#__symbol').val();
        __currency_thousand_separator = $('input#__thousand').val();
        __currency_decimal_separator = $('input#__decimal').val();
        __currency_symbol_placement = $('input#__symbol_placement').val();
        if ($('input#__precision').length > 0) {
            __currency_precision = $('input#__precision').val();
        } else {
            __currency_precision = 2;
        }

        if ($('input#__quantity_precision').length > 0) {
            __quantity_precision = $('input#__quantity_precision').val();
        } else {
            __quantity_precision = 2;
        }

        //Set page level currency to be used for some pages. (Purchase page)
        if ($('input#p_symbol').length > 0) {
            __p_currency_symbol = $('input#p_symbol').val();
            __p_currency_thousand_separator = $('input#p_thousand').val();
            __p_currency_decimal_separator = $('input#p_decimal').val();
        }

        __currency_convert_recursively($('.content'));
    });

    $(document).on('click', '.show-product-details', function(e){
        e.preventDefault();
        $.ajax({
            url: $(this).data('href'),
            dataType: 'html',
            success: function(result) {
                $('.product_modal')
                    .html(result)
                    .modal('show');
                __currency_convert_recursively($('.product_modal'));
            },
        });
    });

    $(document).on('click', '.menu', function(e){
        e.preventDefault();
        $('.navbar-toggle').addClass('collapsed');
        $('.navbar-collapse').removeClass('in');

        var cat_id = $(this).attr('href');
        if ($(cat_id).length) {
            $('html, body').animate({
                scrollTop: $(cat_id).offset().top
            }, 1000);
        }
    });

    })(jQuery);

    $(window).scroll(function() {
        var height = $(window).scrollTop();

        if(height  > 180) {
            $('nav').addClass('navbar-fixed-top');
            $('.scrolltop:hidden').stop(true, true).fadeIn();
        } else {
            $('nav').removeClass('navbar-fixed-top');
            $('.scrolltop').stop(true, true).fadeOut();
        }
    });

    $(document).on('click', '.scroll', function(e){
        $("html,body").animate({scrollTop:$("#top").offset().top},"1000");
        return false;
    });
</script>
<script>
    function addToCart(product_id,variation_id=null){
        $.ajax({
            url: "{{action('\Modules\ProductCatalogue\Http\Controllers\ProductCatalogueController@addToCart')}}",
            type:"POST",
            data: {
                _token: "{{csrf_token()}}",
                product_id:product_id,
                variation_id:variation_id
            },
            
            success: function(result) {
              updateCart();
            },
        });
        
    }
    function updateCart(){
        $.ajax({
            url: "{{action('\Modules\ProductCatalogue\Http\Controllers\ProductCatalogueController@updateCart')}}",
            type:"POST",
            data: {
                _token: "{{csrf_token()}}",
               
            },
            
            success: function(result) {
               $('.cart_num').text(result);
            },
        });;
    }
    
</script>
<script>
   
    
     $(document).on('click', '.deleteItem', function(e){
         e.preventDefault();
        // debugger
       $.ajax({
            url: "{{action('\Modules\ProductCatalogue\Http\Controllers\ProductCatalogueController@deleteFromCart')}}",
            type:"POST",
            data: {
                _token: "{{csrf_token()}}",
                'product_id':$(this).val()
            },
            
            success: function(result) {
             
            if(result==true){
                $(this).closest('tr').remove();
                $(this).parents('td').parents('tr').remove();  
                }else{
                    
                }
                update_table();
                updateCart();
            },
        });
    });
    function update_table(){
        debugger;
         $.ajax({
            url: "{{action('\Modules\ProductCatalogue\Http\Controllers\ProductCatalogueController@updateTable')}}",
            type:"POST",
            data: {
                _token: "{{csrf_token()}}",
               
            },
            
            success: function(result) {
            $('.container').html(result);
                updateCart();
            },
        });
    }
    $(document).on('change','.product_qty',function(){
       
        var row = $(this).closest('tr');
        update_row(row);
        
    });
    function update_row(row){
         var unit_price= row.find('.unit_price').val();
         var product_qty= row.find('.product_qty').val();
         var total_row=parseFloat(product_qty) * parseFloat(unit_price);
         total_row=total_row.toFixed(2);
         row.find('.total_row').val(total_row);
         row.find('.total_row_text').text(total_row);
         update_total();
    }
    function update_total(){
        debugger;
        var total=0;
        $('table > tbody  > tr').each(function(index, tr) { 
           var t_row = $(this).find('.total_row').val();
           total += parseFloat(t_row);
        });
        total=total.toFixed(2);
        $('.inv_total').val(total);
        $('.inv_total_text').text(total);
    }
</script>

@endsection