@extends('layouts.layout')
@section('body_class', 'nav-md')
@section('css')
    <style type="text/css">
        .customButton {
            margin-bottom: 0px; 
            background: #4caf50; 
            border: 1px solid #aed581; 
            border-radius: 5px; 
            font-size: 13px; 
            color: #fff; 
            padding: 2px 5px;
        }

        .btnDisabled {
            background: #ccc;
        }

        th, td {
            font-size: 13px;
        }

        .bg-yellow {
            background: #ffa726;
            border: 1px solid #ffa726;
        }

        .bg-blue {
            background: #ffa726;
            border: 1px solid #ffa726;
        }

        @media print {
            .noPrint {
                display:none;
            }
            .onlyPrint {
                margin-top: 25px;
                text-align: center;
            }
        }
        @media screen {
            .onlyPrint {
                display: none;
            }
        }
    </style>
@section('body_content')
<div class="container body noPrint">
    <div class="main_container">
        @include('includes.sidebar')
        <div class="right_col" role="main">
            <div class="page-title">
                <div class="title_left">
                    <h3><i class="fa fa-exchange"></i>&nbsp;&nbsp;Cashbox List <small>cashbox can moved to other location</small></h3>
                </div>
                <div class="clearfix"></div>
            </div>

            <div class="row">    
                <div class="col-xs-12">
                    <ol class="breadcrumb">
                        <li><a href="{{ url('/dashboard') }}">Home</a></li>
                        <li class="active">Cashbox</li>
                        <li class="active">Cashbox Move</li>
                    </ol>
                </div>            
                <div class="col-xs-12">
                    <div class="x_panel">                        
                        <div class="x_content">
                            <h2><i class="fa fa-file-text"></i> Filter Data</h2>
                            <div class="row">
                                <div class="col-md-5" style="padding: 5px 25px;">
                                    <form method="GET">
                                        <div class="row">
                                            <div class="col-md-4" style="padding-top: 8px;"><b>Cashbox Code</b></div>
                                            <div class="col-md-8">
                                                <input type="text" class="form-control" name="cashbox_code" placeholder="code" value="{{ $request['cashbox_code'] }}">
                                            </div>
                                        </div>
                                        <div class="row" style="margin-top: 5px;">
                                            <div class="col-md-4" style="padding-top: 8px;"><b>Store Name</b></div>
                                            <div class="col-md-8">
                                                <input type="text" class="form-control" name="store_name" placeholder="store" value="{{ $request['store_name'] }}">
                                            </div>
                                        </div>
                                        <div class="row" style="margin-top: 5px;">
                                            <div class="col-md-4"></div>
                                            <div class="col-md-8">
                                                <button type="submit" class="btn btn-success"><i class="fa fa-search"></i> Search</button>
                                                <a href="{{ route('butik_emas\cashbox_move_list') }}" class="btn btn-warning">Reset</a>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <hr style="border-top: 1px dashed #bbb;">
                            <h2><i class="fa fa-dropbox"></i> Cashbox Data</h2>
                            <table class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th class="text-left">ID</th>
                                        <th class="text-left">Store</th>
                                        <th class="text-left">Code</th>
                                        <th class="text-left">Total Item</th>
                                        <th class="text-left">Status</th>
                                        <th class="text-left">Barcode</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($cashbox_lists as $key => $list)
                                        <tr>
                                            <td>{{ $list->id }}</td>
                                            <td>{{ $list->store->nama }}</td>
                                            <td>
                                                {{ $list->code }} 
                                                @if($list->detail_count >= env('MAX_ITEM_INBOX'))
                                                    <i class="fa fa-exclamation-circle" style="color:#f44336; cursor:pointer;" data-toggle="tooltip" data-placement="top" title="Cashbox Full"></i>
                                                @endif
                                            </td>
                                            <td>{{ $list->detail->count() }}</td>
                                            <td>
                                                @if($list->status == 'on_store') On Store 
                                                @elseif($list->status == 'sending') <i class="fa fa-truck"></i> Sending 
                                                @elseif($list->status == 'requested') <i class="fa fa-share-square-o"></i> Requested 
                                                @elseif($list->status == 'request_accepted') <i class="fa fa-check "></i> Request Accepted
                                                @endif
                                            </td>
                                            <td>
                                                <a href="?code={{ $list->code }}" class="customButton bg-yellow"><i class="fa fa-qrcode"></i> Barcode</button>
                                            </td>
                                            <td>
                                                @if($list->status == 'on_store')
                                                    @if($list->store->id == 1)
                                                        <a href="{{ route('butik_emas\cashbox_move_detail_list', ['id'=>$list->id]) }}" class="customButton"><i class="fa fa-file-text"></i> Move Cashbox</a>
                                                    @endif
                                                    @if($list->store->id != 1)
                                                        <a href="{{ route('butik_emas\cashbox_request_detail_list', ['id'=>$list->id]) }}" class="customButton bg-blue"><i class="fa fa-file-text"></i> Request Cashbox</a>
                                                    @endif
                                                @else
                                                    Processing
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                    @if(count($cashbox_lists) == 0)
                                        <tr>
                                            <td colspan="10" align="center">Data not found</td>
                                        </tr>
                                    @endif
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @include('includes.footer')
    </div>
</div>
<div id="modal_barcode" class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div  class="modal-body">
                <h3 class="noPrint"><center>Cashbox Code <b>{{ $request['code'] }}</b></center></h3>
                <div id="detailbarcode" style="width: 422px; margin-right: auto; margin-left: auto; border: 0px solid #f00;"></div>
                <div class="text-center noPrint" style="margin-top: 10px;"><button class="btn btn-sm btn-success" onclick="window.print(); $('#modal_barcode').modal('hide')"><i class="fa fa-print"></i> Print</button></div>
            </div>
        </div>
    </div>
</div> 
@if($request['code'])
    <div id="printBarcode" class="onlyPrint"><img src="data:image/png;base64,{{ $barcode }}" /></div>
@endif
@endsection

@section('scripts')
    <script type="text/javascript">
        @if($request['code'])
            getBarcode('{{ $request['code'] }}');
        @endif
        function getBarcode(code) {
            $.ajax({
                url: '{{ route('cashbox_generate_barcode') }}',
                method: "POST",
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                data: {
                    "code" : code
                },
                error: function(response) {
                    alert('Oops, something wrong');
                },
                success: function(response) {
                    $('#detailbarcode').html(response.data);
                    $('#modal_barcode').modal('show');
                }
            });
        }
    </script>
@endsection