@extends('layouts.layout')
@section('body_class', 'nav-md')
@section('css')
    <style type="text/css">
        .table_child, td, th {  
          border: 1px solid #ddd;
          text-align: left;
        }

        .table_child {
          border-collapse: collapse;
          width: 100%;
        }

        .table_child th, td {
          padding: 5px;
        }

        td {
            font-size: 12px;
        }

        .customeButton {
            margin-bottom: 0px; 
            background: #aed581; 
            border: 1px solid #aed581; 
            border-radius: 5px; 
            font-size: 13px; 
            color: #fff; 
            padding: 2px 5px;
        }

        .buttonArea {
            font-size: 14px; 
            cursor: pointer; 
            padding: 5px !important;
        }

        .buttonArea:hover {
            color: #bdbdbd;
        }

        .dataTo {
            display: none;
        }

        .alert {
            font-size: 14px;
        }

        .text-middle {
            padding-top: 27px !important;
        }

        .zoom-in {cursor: zoom-in !important;}

        .x_panel {
            padding: 5px;
        }
</style>
@endsection
@section('body_content')
<div class="container body">
    <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-clone"></i>&nbsp;&nbsp;Butik Emas Transaction</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><a href="{{ route('butik_emas\cashbox_move_list') }}">Cashbox</a></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>
                            <form method="GET">
                                <div class="row">
                                    <div class="col-md-5" style="padding: 5px 25px;">
                                        <div class="row">
                                            <div class="col-md-4 text-right" style="padding-top: 8px;"><b>Status</b></div>
                                            <div class="col-md-8">
                                                <select class="form-control" name="status">
                                                    <option value="all">All</option>
                                                    <option value="disbursed" @if($request['status']=='disbursed') selected @endif>Disbursed</option>
                                                    <option value="iris_created" @if($request['status']=='iris_created') selected @endif>Iris Created</option>
                                                    <option value="waiting_approval" @if($request['status']=='waiting_approval') selected @endif>Waiting Approval</option>
                                                    <option value="rejected" @if($request['status']=='rejected') selected @endif>Rejected</option>
                                                    <option value="processing" @if($request['status']=='processing') selected @endif>Processing</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="row" style="margin-top: 5px;">
                                            <div class="col-md-4 text-right" style="padding-top: 8px;"><b>Store Name</b></div>
                                            <div class="col-md-8">
                                                <select class="form-control" name="store_name">
                                                    <option value="0">all store</option>
                                                    @foreach($stores as $store)
                                                        <option value="{{ $store->id }}" style="font-size: 15px;" @if($store->id == $request['store_name']) selected @endif>{{ $store ? $store->nama : '-' }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-5" style="padding: 5px 25px;">
                                        <div class="row">
                                            <div class="col-md-4 text-right text-right" style="padding-top: 8px;"><b>Date Start</b></div>
                                            <div class="col-md-8">
                                                <input type="date" name="start_date" class="form-control" value="{{ $request['start_date'] }}">
                                            </div>
                                        </div>
                                        <div class="row" style="margin-top: 5px;">
                                            <div class="col-md-4 text-right" style="padding-top: 8px;"><b>Date End</b></div>
                                            <div class="col-md-8">
                                                <input type="date" name="end_date" class="form-control" value="{{ $request['end_date'] }}">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-10" style="margin-top: 10px;">
                                        <div class="text-center">
                                            <button type="submit" class="btn btn-success"><i class="fa fa-search"></i> Search</button>
                                            <a href="{{ route('butik_emas\report') }}" class="btn btn-warning">Reset</a>
                                            <a href="{{ route('butik_emas\report\download') }}?status={{ $request['status'] }}&store_name={{ $request['store_name'] }}&start_date={{ $request['start_date'] }}&end_date={{ $request['end_date'] }}" class="btn btn-primary"><i class="fa fa-download"></i> Download</a>
                                        </div>
                                    </div>
                                </div>
                            </form>
                            <hr style="border-top: 1px dashed #bbb;">
                            <table class="table table-bordered">
                                <tr>
                                    <th rowspan="2" class="text-middle">No</th>
                                    <th rowspan="2" class="text-middle">Date</th>
                                    <th rowspan="2" class="text-middle">Cabang</th>
                                    <th rowspan="2" class="text-middle">Customer</th>
                                    <th rowspan="2" class="text-middle">Status</th>
                                    <th rowspan="2" class="text-middle">Invoice No</th>
                                    <th colspan="4" class="text-center">Transfer</th>
                                    <th rowspan="2" class="text-middle" width="5%">Detail</th>
                                </tr>
                                <tr>
                                    <th>Nominal</th>
                                    <th>Date</th>
                                    <th>Bank Acccount</th>
                                    <th>Bank Admin</th>
                                </tr>
                                @foreach($transactions as $key => $transaction)
                                    @php
                                        $start = 0;
                                        if(isset($_GET['page'])) {
                                            $start = $_GET['page'] * 20 - 20;
                                        }
                                    @endphp
                                    <tr>
                                        <td id="rowspan_{{ $transaction->id }}" rowspan="1">{{$start + $key + 1}}</td>
                                        <td>{{ \Carbon\Carbon::parse($transaction->created_at)->format('d-M-y') }}</td>
                                        <td>{{ $transaction->store ? $transaction->store->nama : '-' }}</td>
                                        <td>{{ $transaction->name }}</td>
                                        <td>
                                            {{ $transaction->status }} @if($transaction->status == 'disbursed') <i class="fa fa-check" style="color: #9ccc65;"></i> @endif
                                        </td>
                                        <td>{{ $transaction->code }}</td>
                                        <td class="text-right">{{ number_format($transaction->disburse) }}</td>
                                        <td>{{ \Carbon\Carbon::parse($transaction->disbursed_at)->format('d-M-y') }}</td>
                                        <td>{{ $transaction->bank ? $transaction->bank->bank : 'Cash' }}</td>
                                        <td class="text-right">{{ number_format($transaction->admin_fee) }}</td>
                                        <td class="text-center buttonArea buttonAction_{{ $transaction->id }}" onclick="showHideDetail({{ $transaction->id }})">
                                            <i class="fa fa-plus-circle" style="color: #aed581;" aria-hidden="true"></i>
                                        </td>
                                    </tr>
                                    <tr id="baris_{{ $transaction->id }}" style="display: none;">
                                        <td colspan="10" style="background: #eee;">
                                            <input type="hidden" id="statusBaris_{{ $transaction->id }}" value="0">
                                            <table class="table_child" style="margin-bottom: 0px;">
                                                <tr>
                                                    <th>No</th>
                                                    <th>PLU</th>
                                                    <th width="55px">Photo</th>
                                                    <th>Carat</th>
                                                    <th>Brand</th>
                                                    <th>Weight (Gram)</th>
                                                    <th>QTY</th>
                                                    <th>Unit Price</th>
                                                    <th>Total Price</th>
                                                </tr>
                                                @php $nodetail=0; @endphp
                                                @foreach($transaction->detail as $detail)
                                                    @php 
                                                        $nodetail += 1;
                                                        $photo_url = env('ALIYUN_OSS_IMAGE_URL') . '/butikemas/temporary/item/'. $detail->photo; 
                                                    @endphp
                                                    <tr>
                                                        <td valign="top">{{ $nodetail }}</td>
                                                        <td valign="top">{{ $detail->plu ? : '-' }}</td>
                                                        <td class="buttonArea zoom-in" onclick="showPhotoDetail('{{ $photo_url }}')">
                                                            <img src="{{ $photo_url }}?x-oss-process=image/resize,w_50,limit_0" style="padding: 3px; border: 1px solid #ddd;">
                                                        </td>
                                                        <td valign="top">{{ $detail->carat->carat->carat_description }}</td>
                                                        <td valign="top">{{ $detail->carat->brand->brand }}</td>
                                                        <td valign="top">{{ $detail->weight }}</td>
                                                        <td valign="top">{{ $detail->quantity }}</td>
                                                        <td valign="top">{{ number_format($detail->unit_price) }}</td>
                                                        <td valign="top">{{ number_format($detail->unit_price * $detail->quantity) }}</td>
                                                    </tr>
                                                @endforeach
                                                @if($transaction->detail->count() == 0)
                                                    <tr>
                                                        <td colspan="12">Data not found</td>
                                                    </tr>
                                                @endif
                                            </table>
                                        </td>
                                    </tr>
                                @endforeach
                            </table>
                            <div class="text-center">{{ $transactions->links() }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @include('includes.footer')
    </div>
</div>   
<div id="modal_default_photo" class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div id="detailPhoto" class="modal-body">
            </div>
        </div>
    </div>
</div>         
@endsection

@section('scripts')
    <script type="text/javascript">
        function showHideDetail(no) {
            let status = $('#statusBaris_' + no).val();
            if(status == 1) {
                $('#statusBaris_' + no).val(0);
                $('#rowspan_' + no).attr('rowspan', 1);
                $('#baris_' + no).css('display', 'none');
                $('.buttonAction_' + no).html('<i class="fa fa-plus-circle" style="color: #aed581;" aria-hidden="true"></i>');
            }
            else {
                $('#statusBaris_' + no).val(1);
                $('#rowspan_' + no).attr('rowspan', 2);
                $('#baris_' + no).css('display', '');
                $('.buttonAction_' + no).html('<i class="fa fa-minus-circle" style="color: #ffa726;" aria-hidden="true"></i>');
            }
        }

        function showPhotoDetail(photo_url) {
            $('#detailPhoto').html('<img src="' + photo_url + '" width="100%">');
            $('#modal_default_photo').modal('show');
        }
    </script>
@endsection