@extends('admin.layout.master')
@section('title','CAKE ORDER MANAGEMENT')
@section('custom_style')
    <style>
        input[type=text],
        input[type=file],
        input[type=number] {
            height: 35px !important;
        }

        .table th, .table td {
                padding: 0px 5px;
                color: black;
            }
            .table th {
            background: #ab3535;
            padding: 5px !important;
            color: white !important;
            }
            .table-bordered th, .table-bordered td {
                border: 1px solid #c1c1c1 !important;
            }
            .special-cell{
                background: #bfbfbf;
                padding: 5px !important;
                color: black !important;
            }
            .btn-sina-submit {
                position: fixed;
                bottom:50%;
                right:2px;
            }
            @media only screen and (max-width: 620px) {
                .btn-sina-submit {
                    position: fixed;
                    min-width: 100%;
                    bottom:0;
                    right:0;
                }
            }

    </style>
@endsection
@section ('content')
<div class="card sina-card">
    <div class="card-header card-header-s d-flex flex-wrap align-items-center">
        <h4 class="col-6 pl-0">CAKE ORDER CART</h4>
        {{-- <div  class="col-6 d-flex justify-content-end">
            <a href="{{route('order.create')}}" class="btn-sina-title-add d-flex align-items-center" type="button" name="button">
                <div class="col pl-0 pr-2">
                    <i class="fas fa-plus-circle"></i>
                </div>
                <div class=""> VIEW CART</div>
            </a>
        </div> --}}
    </div> 
   
    <div class="card-body"> 
        <input type="hidden" name="" id="csrf-token" value="{{ Session::token() }}" />
        <form id="form" method="post" action="{{ route('order.cake_order_store') }}" name="form" enctype="multipart/form-data">
            @csrf
            <div class="table-responsive">
                <table class="table table-bordered table-hover" id="datatable_apply">
                    <thead>
                        <tr>
                            <th width="7%">#</th>
                            <th width="10%">COLOR</th>
                            <th width="10%">SHAPE</th>
                            <th width="10%">WEIGHT</th>
                            <th width="10%">DESIGN</th>
                            <th width="15%">TITLE</th>
                            <th width="10%">NAME</th>
                            <th width="5%">D DATE</th>
                            <th width="5%">D TIME</th>
                            <th width="10%">NOTE</th>
                            <th width="3%">X</th>
                        </tr>
                    </thead>
                    <tbody id="tbl_body">
                        @php
                            $i=1;
                        @endphp
                        {{-- @for ($i = 0; $i < 12; $i++) --}}
                        @forelse ($carts as $item)
                        
                        <tr id="tr{{$item->id}}">
                            <td>{{ ($i++) }}</td>
                            <td>
                               <select name="color_id[{{$item->id}}]" class="select_2" onchange="updateCartValue('{{$item->id}}',this.value,'color_id')">
                                @forelse ($products as $key=>$product)
                                    <option value="{{$product->id}}" {{$item->color_id==$product->id?'selected':''}}>{{$product->name_eng}} ({{$product->name_local}})</option>
                                @empty
                                    
                                @endforelse
                                </select>
                            </td>
                            <td>
                                <select name="shape_id[{{$item->id}}]" class="select_2" onchange="updateCartValue('{{$item->id}}',this.value,'shape_id')">
                                    @forelse (config('default.shapes') as $s=>$shape)
                                    <option value="{{$s}}" {{$item->shape_id==$s?'selected':''}}>{{$shape}}</option>
                                    @empty
                                        
                                    @endforelse
                                </select>
                            </td>
                            <td><input type="number" name="weight[{{$item->id}}]" class="form-control" id="" step=".01" onchange="updateCartValue('{{$item->id}}',this.value,'weight')" value="{{$item->weight}}"></td>
                            <td><input type="text" name="design[{{$item->id}}]" class="form-control" id="" onchange="updateCartValue('{{$item->id}}',this.value,'design')"  value="{{$item->design}}"></td>

                            <td>
                                <select name="heading[{{$item->id}}]" class="form-control select_2" onchange="updateCartValue('{{$item->id}}',this.value,'heading_id')" >
                                    @forelse (config('default.headings') as $h=>$heading)
                                    <option value="{{$h}}" {{$item->heading_id==$h?'selected':''}}>{{$heading}}</option>
                                    @empty
                                        
                                    @endforelse
                                   
                                </select>
                            </td>
                            <td><input type="text" name="name[{{$item->id}}]" class="form-control" id="" value="{{$item->heading_name}}" onchange="updateCartValue('{{$item->id}}',this.value,'heading_name')"></td>
                            <td><input type="date" name="delivery_date[{{$item->id}}]" class="form-control" id="" value="{{date('Y-m-d',strtotime($item->delivery_date))}}" onchange="updateCartValue('{{$item->id}}',this.value,'delivery_date')"></td>
                            <td>
                                <select name="delivery_time[{{$item->id}}]" class="form-control select_2" onchange="updateCartValue('{{$item->id}}',this.value,'delivery_time')">
                                    @forelse (config('default.delivery_time') as $dt=>$dtime)
                                    <option value="{{$dt}}" {{$item->delivery_time==$dt?'selected':''}}>{{$dtime}}</option>
                                    @empty
                                        
                                    @endforelse
                                </select>
                        </td>
                        <td><input type="text" name="note[{{$item->id}}]" class="form-control" id="note{{$item->id}}" value="{{$item->note}}" onchange="updateCartValue('{{$item->id}}',this.value,'note')"></td>
                        <td><button type="button" class="btn btn-danger" onclick="deleteRow({{$item->id}})"><i class="fa fa-trash"></i></button></td>
                        </tr>
                        
                        @empty
                            
                        @endforelse   
                    </tbody>
                </table>
            </div>
            
            <hr>
            
            <div class="row pb-0  modal-footer">
                <input type="button" class="btn btn-danger" value="Empty Cart" onclick="deleteRow(0)">
                <button class="btn-sina-submit" type="submit"><i class="fa fa-save"></i> Place Order </button>
                {{-- <input style="position: fixed;top:50%;right:2px;" class="btn-sina-submit" type="submit" id="save" value="save"> --}}
            </div>
        </form>
    </div>
</div>

@endsection
@section('script')
<script>
    $('.select_2').select2();
     $(document).ready(function() {
        $('#datatable_apply').dataTable({
            "paging": false,
            "columnDefs": [ {
                "orderable": false,
                // "visible": false, 
                'targets': [0,4,5],
            } ]
        });
    });
function deleteRow(id){
    if(confirm('are you sure?')) { 
        $.ajax({
                type: "GET",
                url: "{{route('order.cake_cart_remove')}}",
                data: {
                    cart_id:id,
                },
                success: function (data) {
                    console.log(data);
                    if(id!=0){
                        $('#tr'+id).remove();
                    }else{
                        location.reload();
                    }
                },
                error: function (data) {
                    alert('Something Went Wrong!')
                    console.log(data);
                },
            });
    }
}
function updateCartValue(id,data,field){
    if(confirm('are you sure?')){
        $.ajax({
                type: "GET",
                url: "{{route('order.cake_cart_update')}}",
                data: {
                    id:id,
                    field:field,
                    data:data,
                },
                success: function (data) {
                location.reload();
                },
                error: function (response) {
                },
            });
    }
}
</script>
@stop