@extends('layouts.app')
@section('title', 'Automatic Casheir Routations (Beta)')

@section('content')

<!-- Content Header (Page header) -->
<section class="content-header no-print">
    <h1>Automatic Casheir Routations Details</h1>
</section>

<!-- Main content -->
<section class="content no-print">
    @foreach($casheir_routations_details as $casheir_routations_detail)
    <div class="row">
        @component('components.filters', ['title' => __('report.filters')])
        <div class="col-md-12 mx-12">
                <p class="text-center">Casher Routations has been created before for this sift by {{$casheir_routations_detail->user_name}}</p>
            </div>
        @endcomponent
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="box">
                <div class="box-body">
                    <div class="table-responsive">
                    <table id="dtBasicExample" class="table table-bordered table-striped text-center" >
                        <caption style="display: none;"><label class="form-control bg-dark header-print">Automatic Casheir Routations Details created by : {{$casheir_routations_detail->user_name}} at {{$casheir_routations_detail->casheir_routations_created_at}} </label></caption>
                        <thead>
                            <tr>
                                <th>Cashier Name</th>
                                <th>Location Name</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach(json_decode($casheir_routations_detail->casheir_routations_details) as $casheir_routations_detail_data)
                                <tr>
                                    <td>
                                        {{$casheir_routations_detail_data->user_name}}
                                    </td>
                                    <td>
                                        {{$casheir_routations_detail_data->location_name}}
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endforeach

    
</section>
<!-- /.content -->

<style>
    tr.odd td:first-child,
tr.even td:first-child {
    padding-left: 4em;
}
</style>

@endsection


@section('javascript')
<script>
   $(document).ready(function () {

    $('#dtBasicExample').DataTable({  
        aLengthMenu: [[10, 25, 50, 75, -1], [10, 25, 50, 75, "All"]],
        iDisplayLength: -1,
        });
        
});
</script>
@endsection