@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;
        }

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

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

        .dataTo {
            display: none;
        }

        .alert {
            font-size: 14px;
        }

        .zoom-in {cursor: zoom-in !important;}
    </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-dropbox"></i>&nbsp;&nbsp;Detail Cashbox List</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_receive_list') }}">Receive Cashbox List</a></li>
                        <li class="active">Cashbox Move</li>
                    </ol>
                </div>            
                <div class="col-xs-12">
                    <div class="x_panel">                        
                        <div class="x_content">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="row" style="margin-bottom: 5px;">
                                        <div class="col-md-4"><b>ID</b></div>
                                        <div class="col-md-8">: {{ $cashbox->id }}</div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-4"><b>Store</b></div>
                                        <div class="col-md-8">: {{ $cashbox->store->nama }}</div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="row" style="margin-bottom: 5px;">
                                        <div class="col-md-1"></div>
                                        <div class="col-md-4"><b>Code</b></div>
                                        <div class="col-md-7">: {{ $cashbox->code }} ({{ $cashbox->detail->count() }} item)</div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-1"></div>
                                        <div class="col-md-4"><b>Status</b></div>
                                        <div class="col-md-7">: @if($cashbox->status == 'on_store') On Store 
                                                                @elseif($cashbox->status == 'requested') <i class="fa fa-share-square-o"></i> Requested 
                                                                @elseif($cashbox->status == 'request_accepted') <i class="fa fa-check"></i> Request Accepted 
                                                                @endif
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    @if($cashbox->status == 'request_accepted')
                                        <button class="btn btn-success" style="font-size: 14px;" data-toggle="modal" onclick="confirmRequest('{{ $cashbox->code }}', '{{ $cashbox->store->nama }}')"><i class="fa fa-download"></i> Receive Cashbox</button>
                                    @elseif($cashbox->status == 'requested')
                                        <button class="btn btn-warning" style="font-size: 14px;" disabled="disabled"><i class="fa fa-clock-o"></i> Waiting Approval</button>
                                        <button class="btn btn-danger" style="font-size: 14px;" onclick="cancelRequest('{{ $cashbox->code }}')"><i class="fa fa-window-close"></i> Cancel Request</button>
                                    @else
                                        <button class="btn btn-success btn-lg" style="font-size: 18px;" disabled="disabled"><i class="fa fa-download"></i> Cashbox Received</button>
                                    @endif
                                </div>
                            </div>

                            <hr style="border-top: 1px dashed #bbb;">
                            <h2><i class="fa fa-file-text"></i> Detail Item</h2>
                            <table class="table table-bordered">
                                <tr>
                                    <th>No</th>
                                    <th>Code</th>
                                    <th>Name</th>
                                    <th>Handphone</th>
                                    <th>Disburse</th>
                                    <th>Approve By</th>
                                    <th>Approve At</th>
                                    <th width="25">#</th>
                                </tr>
                                @php $no=0; @endphp
                                @foreach($cashbox->detail as $detail)
                                    @foreach($detail->buy_item as $buy_item)
                                        @php $no += 1; @endphp
                                        <tr>
                                            <td id="rowspan_{{ $buy_item->id }}" rowspan="1">{{ $no }}</td>
                                            <td>{{ $buy_item->code }}</td>
                                            <td>{{ $buy_item->name }}</td>
                                            <td>{{ $buy_item->handphone }}</td>
                                            <td class="text-right">{{ number_format($buy_item->disburse) }}</td>
                                            <td>{{ $buy_item->approved_user ? $buy_item->approved_user->name : '~' }}</td>
                                            <td>{{ \Carbon\Carbon::parse($buy_item->approved_at)->format('d F Y H:i') }}</td>
                                            <td class="buttonArea buttonAction_{{ $buy_item->id }}" onclick="showHideDetail({{ $buy_item->id }})">
                                                <i class="fa fa-plus-circle" style="color: #aed581;" aria-hidden="true"></i>
                                            </td>
                                        </tr>
                                        <tr id="baris_{{ $buy_item->id }}" style="display: none;">
                                            <td colspan="7" style="background: #eee;">
                                                <input type="hidden" id="statusBaris_{{ $buy_item->id }}" value="0">
                                                <table class="table_child" style="margin-bottom: 0px;">
                                                    <tr>
                                                        <th>No</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>
                                                        <th width="150">Notes</th>
                                                    </tr>
                                                    @php $nodetail=0; @endphp
                                                    @foreach($buy_item->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 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 }}</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>
                                                            <td valign="top">
                                                                <span id="finalNotes_{{ $detail->id }}" style="line-height:4px !important;">
                                                                    <span id="finalNotesValue_{{ $detail->id }}" style="line-height:4px !important;">
                                                                        {{ $detail->notes }} 
                                                                    </span>
                                                                    @if($detail->notes) <br> @endif
                                                                    <button class="btn btn-sm btn-default" style="margin-top:2px; padding: 2px 6px;" onclick="enableEditNotes({{ $detail->id }})"><i class="fa fa-pencil"></i> Edit</button>
                                                                </span>
                                                                <span style="display:none;" id="editNotes_{{ $detail->id }}">
                                                                </span>
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                    @if($buy_item->detail->count() == 0)
                                                        <tr>
                                                            <td colspan="10">Data not found</td>
                                                        </tr>
                                                    @endif
                                                </table>
                                            </td>
                                        </tr>
                                    @endforeach

                                @endforeach
                                @if($cashbox->detail->count() == 0)
                                    <tr>
                                        <td colspan="10">Data not found</td>
                                    </tr>
                                @endif
                            </table>
                            @if (Session::has('success'))
                                <div class="alert alert-success" role="alert">
                                    {!! Session::get("success") !!}
                                </div>
                            @endif
                            @if (Session::has('oops'))
                                <div class="alert alert-warning" role="alert">
                                    {!! Session::get("oops") !!}
                                </div>
                            @endif

                            <hr style="border-top: 1px dashed #bbb;">
                            <h2><i class="fa fa-history"></i> Cashbox Moving Log</h2>
                            <table class="table table-bordered">
                                <tr>
                                    <th>Created At</th>
                                    <th>Created By</th>
                                    <th>Received At</th>
                                    <th>Received By</th>
                                    <th>Cashbox Code</th>
                                    <th>From</th>
                                    <th>To</th>
                                    <th>Status</th>
                                </tr>
                                @foreach($cashbox->logs as $log)
                                    <tr>
                                        <td>{{ \Carbon\Carbon::parse($log->created_at)->format('d F Y H:i') }}</td>
                                        <td>{{ $log->created_by_user->name }}</td>
                                        <td>{{ $log->received_at ? : '~' }}</td>
                                        <td>{{ $log->received_by_user ? $log->received_by_user->name : '~' }}</td>
                                        <td>{{ $cashbox->code }}</td>
                                        <td>{{ $log->store_from->nama }}</td>
                                        <td>{{ $log->store_to->nama }}</td>
                                        @if ($loop->last)
                                            <td>{!! $cashbox->status == 'on_store' ? 'On Store' : '<i class="fa fa-share-square-o"></i> Requested' !!}</td>
                                        @else
                                            <td>On Store</td>
                                        @endif
                                    </tr>
                                @endforeach
                                @if($cashbox->logs->count() == 0)
                                    <tr>
                                        <td colspan="10">Data not found</td>
                                    </tr>
                                @endif
                            </table>
                        </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 enableEditNotes(detail_id) {
            $.ajax({
                url: '{{ url('butik_emas/cashbox_receive/get_item_notes') }}/' + detail_id,
                method: "GET",
                error: function(response) {
                    alert('Oops, something wrong');
                },
                success: function(response) {
                    let notes = response.data.notes == null ? '' : response.data.notes;
                    $('#editNotes_' + detail_id).html('<textarea id="notesForm_'+ detail_id +'" class="notesForm_'+ detail_id +'" style="width:100%; padding:1px 4px; height:40px; line-height:15px;" >' + notes + '</textarea><button class="btn btn-sm btn-success" style="margin-top:2px; padding: 2px 6px;" onclick="saveNotes('+ detail_id +')"><i class="fa fa-save"></i> Save</button>');
                    $('#editNotes_' + detail_id).fadeIn();
                    $('#finalNotes_' + detail_id).hide();
                }
            });
        }
        
        function saveNotes(detail_id) {
            $.ajax({
                url: '{{ route('save_detail_notes') }}',
                method: "POST",
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                data: {
                    "id" : detail_id,
                    "notes" : $('#notesForm_' + detail_id).val(),
                },
                error: function(response) {
                    alert('Oops, something wrong');
                },
                success: function(response) {
                    $('#editNotes_' + detail_id).hide();
                    $('#finalNotesValue_' + detail_id).html(response.data.notes);
                    $('#finalNotes_' + detail_id).fadeIn();
                }
            });
        }

        // $('#modal_move_cashbox').modal('show');
        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');
        }

        function confirmRequest(code, store) {
            if (confirm('Are you sure you want to receive cashbox ' + code + ' from ' + store + ' ?')) {
                $.ajax({
                    url: '{{ route('butik_emas\cashbox_received') }}',
                    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) {
                        alert('Success, item received');
                        location.reload();
                    }
                });
            }
        }

        function cancelRequest(code) {
            if (confirm('Are you sure you want to cancel your cashbox request ?')) {
                $.ajax({
                    url: '{{ route('butik_emas\cashbox_request_cancel') }}',
                    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) {
                        alert(response.message);
                        location = '{{ route('butik_emas\cashbox_receive_list') }}';
                    }
                });
            }
        }
    </script>
@endsection