@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;
            }
        }
        .sm-pd-t th,
        .sm-pd-t td {
            padding: 0rem;
        }

    </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 CREATE</h4>
        <div  class="col-6 d-flex justify-content-end">
            <a href="{{route('order.cake_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_cart_store') }}" name="form" enctype="multipart/form-data">
            @csrf
            <div class="row">
                <div class="col-12">
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover sm-pd-t" id="datatable_apply">
                            <thead>
                                <tr>
                                    {{-- <th width="3%">#</th>
                                    <th width="10%">COLOR</th>
                                    <th width="10%">SHAPE</th>
                                    <th width="5%">WGT</th>
                                    <th style="max-width: 5%;">DESIGN</th>
                                    <th width="15%">TITLE</th>
                                    <th width="15%">HEADING</th>
                                    <th width="8%">D DATE</th>
                                    <th width="10%">D TIME</th>
                                    <th width="15%">NOTE</th> --}}
                                    <th>#</th>
                                    <th>COLOR</th>
                                    <th>SHAPE</th>
                                    <th>WGT</th>
                                    <th>DESIGN</th>
                                    <th>TITLE</th>
                                    <th>HEADING</th>
                                    <th>D DATE</th>
                                    <th>TIME</th>
                                    <th>NOTE</th>
                                </tr>
                            </thead>
                            <tbody id="tbl_body">
                                @for ($i = 0; $i <30 ; $i++)
                                    <tr>
                                        <td class="text-center" style="cursor: pointer"><span class="badge badge-dark" onclick="showDetailsInModel({{$i}})">{{ ($i+1) }}</span></td>
                                        <td>
                                            <select id="color_id{{$i}}" name="color_id[{{$i}}]" class="select_2" style="width:100%;" onchange="setRequiredWeight({{$i}})">
                                                <option value="0">Set Color</option>
                                                @forelse ($products as $key=>$product)
                                                    <option value="{{$product->id}}">{{$product->name_eng}} ({{$product->name_local}})</option>
                                                @empty
                                                @endforelse
                                            </select>
                                        </td>
                                        <td>
                                            <select id="shape_id{{$i}}" name="shape_id[{{$i}}]" class="select_2" style=" width:100%;">
                                                @forelse (config('default.shapes') as $s=>$shape)
                                                <option value="{{$s}}">{{$shape}}</option>
                                                @empty
                                                @endforelse
                                            </select>
                                        </td>
                                        <td><input type="number" name="weight[{{$i}}]" class="" id="weight{{$i}}" step=".01" style="max-width: 60px !important"></td>
                                        <td><input type="text" name="design[{{$i}}]" class="" id="design{{$i}}" style="max-width: 60px !important"></td>
                                        <td>
                                            <select id="heading{{$i}}" name="heading[{{$i}}]" class="select_2" style=" width:100%;">
                                                @forelse (config('default.headings') as $h=>$heading)
                                                    <option value="{{$h}}">{{$heading}}</option>
                                                @empty
                                                @endforelse
                                            </select>
                                        </td>
                                        <td><input type="text" name="name[{{$i}}]" class="" id="name{{$i}}"></td>
                                        <td><input type="date" name="delivery_date[{{$i}}]" class="" id="delivery_date{{$i}}" value="{{date('Y-m-d')}}" style="max-width: 90px !important"></td>
                                        <td>
                                            <select id="delivery_time{{$i}}" name="delivery_time[{{$i}}]" class="select_2" style="width:100%;">
                                                @forelse (config('default.delivery_time') as $dt=>$dtime)
                                                <option value="{{$dt}}">{{$dtime}}</option>
                                                @empty
                                                    
                                                @endforelse
                                            </select>
                                        </td>
                                        <td><input type="text" name="note[{{$i}}]" class="" id="note{{$i}}"></td>
                                    </tr>
                                @endfor
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            
            <hr>
            
            <div class="row pb-0  modal-footer">
                <button class="btn-sina-submit" type="submit"><i class="fa fa-save"></i> Save </button>
                {{-- <input style="position: fixed;top:50%;right:2px;" class="btn-sina-submit" type="submit" id="save" value="save"> --}}
            </div>
        </form>
    </div>
</div>
@include('inventory.global.img_show')
@endsection
@section('script')
<script>
    let dfaultData=@json(config('default'));
    let productsData=@json($products);
    $('.select_2').select2();
     $(document).ready(function() {
        $('#datatable_apply').dataTable({
            "paging": false,
            "columnDefs": [ {
                "orderable": false,
                // "visible": false, 
                'targets': [0,4,5],
            } ]
        });
    });
    const searchedItemById = (id, object = productsData) => object.find(item => item.id == id);
    function showDetailsInModel(row_id){
        console.log(productsData);
        let str='';
        $("#img_modal").modal("hide");
        str+=`<table class="table table-bordered">
                <thead>
                    <tr>
                        <th colspan="2" class="text-center">ORDER ROW : ${row_id+1}</th>
                    </tr>
                </thead>
                <tbody style="border:2px solid black;">
                    <tr>
                        <td style="font-size:25px !important;"> COLOR - ${$('#color_id'+row_id).val()>0?searchedItemById($('#color_id'+row_id).val()).name_eng:'YET NOT SET'}</td>
                
                        <td style="font-size:25px !important;"> SHAPE - ${dfaultData.shapes[$('#shape_id'+row_id).val()]}</td>
                    </tr>

                    <tr>
                        <td style="font-size:25px !important;" colspan="2" style="text-align: center;">${dfaultData.headings[$('#heading'+row_id).val()]} ${$('#name'+row_id).val()}</td>
                    </tr>
                    <tr>
                        <td style="font-size:25px !important;" colspan="2" style="text-align: center;">Note:  ${$('#note'+row_id).val()}</td>
                    </tr>
                    <tr style="border-bottom:2px solid black;">
                        <td style="font-size:25px !important; text-align: center;">
                        DELIVERY DATE : ${$('#delivery_date'+row_id).val()} ${dfaultData.delivery_time[$('#delivery_time'+row_id).val()]}
                        </td>
                        <td style="font-size:25px !important; text-align: center;"> PO - ${$('#weight'+row_id).val()}</td>
                    </tr>
                </tbody>
            </table>`;   
        $('#dynamic_data').html(str);
        $("#img_modal").modal("show");
                    //initSelect2();
    
    }
    function setRequiredWeight(i){
        if($('#color_id'+i).val()>0){
            $('#weight'+i).attr('required',true);
        }else{
            $('#weight'+i).attr('required',false);
        }
    }
</script>
@stop