@extends('layouts.layout')
@section('body_class', 'nav-md')
@section('css')
    <style type="text/css">

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

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

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

        .dataTo {
            display: none;
        }

        .zoom-in {cursor: zoom-in !important;}
    </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-clock-o"></i>&nbsp;&nbsp;Item On Store Temporary</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 Receive</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" style="margin-bottom:5px;">
                                            <div class="col-md-4" style="padding-top: 8px;"><b>Item Type</b></div>
                                            <div class="col-md-8">
                                                <select class="form-control" name="ftype">
                                                    <option>Choose type</option>
                                                    <option value="lm" @if($request['ftype'] == 'lm') selected @endif>Logam Mulia</option>
                                                    <option value="jewelry" @if($request['ftype'] == 'jewelry') selected @endif>Jewelry</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-4" style="padding-top: 8px;"><b>Carat Item</b></div>
                                            <div class="col-md-8">
                                                <input type="text" class="form-control" name="fcarat" placeholder="find by carat here" value="{{ $request['fcarat'] }}">
                                            </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\item_onstore_temp') }}" class="btn btn-warning">Reset</a>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <hr style="border-top: 1px dashed #bbb;">
                            <h2><i class="fa fa-diamond"></i> Item List Data</h2>
                            <div>
                                <!-- Nav tabs -->
                                <ul class="nav nav-tabs" role="tablist">
                                    <li role="presentation" class="@if($request['ftype'] == 'lm') active @endif @if(!$request['ftype']) active @endif"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Logam Mulia</a></li>
                                    <li role="presentation" class="@if($request['ftype'] == 'jewelry') active @endif"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Jewelry</a></li>
                                </ul>

                                <!-- Tab panes -->
                                <div class="tab-content">
                                    <div role="tabpanel" class="tab-pane fade @if($request['ftype'] == 'lm') in active @endif @if(!$request['ftype']) in active @endif" id="home">
                                        <div style="padding: 10px 0;">
                                            <table class="table table-bordered table-striped">
                                                <thead>
                                                    <tr>
                                                        <th class="text-left">ID</th>
                                                        <th class="text-left">Brand</th>
                                                        <th class="text-left">Carat</th>
                                                        <th class="text-left">Weight</th>
                                                        <th class="text-left">QTY</th>
                                                        <th class="text-left">Unit Price</th>
                                                        <th class="text-left">Total Price</th>
                                                        <th>Action</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach($item_lm as $key => $item)
                                                        @php
                                                            $photo_url = env('ALIYUN_OSS_IMAGE_URL') . '/butikemas/temporary/item/'. $item->photo; 
                                                        @endphp
                                                        <tr>
                                                            <td>{{ $item->id }}</td>
                                                            <td>{{ $item->brand_carat->brand->brand }}</td>
                                                            <td>{{ $item->brand_carat->carat }}</td>
                                                            <td>{{ $item->weight }}</td>
                                                            <td>{{ $item->quantity }}</td>
                                                            <td>{{ number_format($item->unit_price) }}</td>
                                                            <td>{{ number_format($item->unit_price * $item->quantity) }}</td>
                                                            <td>
                                                                <img src="{{ $photo_url }}?x-oss-process=image/resize,w_50,limit_0" style="padding: 3px; border: 1px solid #ddd;">
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                    @if(count($item_lm) == 0)
                                                        <tr>
                                                            <td colspan="10" align="center">Data not found</td>
                                                        </tr>
                                                    @endif
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <div role="tabpanel" class="tab-pane fade @if($request['ftype'] == 'jewelry') in active @endif" id="profile">
                                        <div style="padding: 10px 0;">
                                            <table class="table table-bordered table-striped">
                                                <thead>
                                                    <tr>
                                                        <th class="text-left">ID</th>
                                                        <th class="text-left">Brand</th>
                                                        <th class="text-left">Carat</th>
                                                        <th class="text-left">Weight</th>
                                                        <th class="text-left">QTY</th>
                                                        <th class="text-left">Unit Price</th>
                                                        <th class="text-left">Total Price</th>
                                                        <th>Action</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach($item_jewelry as $key => $item)
                                                        @php
                                                            $photo_url = env('ALIYUN_OSS_IMAGE_URL') . '/butikemas/temporary/item/'. $item->photo; 
                                                        @endphp
                                                        <tr>
                                                            <td>{{ $item->id }}</td>
                                                            <td>{{ $item->brand_carat->brand->brand }}</td>
                                                            <td>{{ $item->brand_carat->carat }}</td>
                                                            <td>{{ $item->weight }}</td>
                                                            <td>{{ $item->quantity }}</td>
                                                            <td>{{ number_format($item->unit_price) }}</td>
                                                            <td>{{ number_format($item->unit_price * $item->quantity) }}</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>
                                                        </tr>
                                                    @endforeach
                                                    @if(count($item_jewelry) == 0)
                                                        <tr>
                                                            <td colspan="10" align="center">Data not found</td>
                                                        </tr>
                                                    @endif
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>

                            </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 showPhotoDetail(photo_url) {
            $('#detailPhoto').html('<img src="' + photo_url + '" width="100%">');
            $('#modal_default_photo').modal('show');
        }

    </script>
@endsection