@extends('layouts.layout')
@section('body_class', 'nav-md')
@section('css')
    <style type="text/css">
        .control-label {
            text-align: left !important;
            font-weight: bold;
            padding-top:  0 !important;
        }

        input[type=checkbox], input[type=radio] {
            margin: 3px 0;
        }


        #cover-spin {
            position:fixed;
            width:100%;
            left:0;right:0;top:0;bottom:0;
            background-color: #000;
            opacity: 0.5;
            /*background-color: rgba(255,255,255,0.7);*/
            z-index:9999;
            display:none;
        }

        @-webkit-keyframes spin {
            from {-webkit-transform:rotate(0deg);}
            to {-webkit-transform:rotate(360deg);}
        }

        @keyframes spin {
            from {transform:rotate(0deg);}
            to {transform:rotate(360deg);}
        }

        #cover-spin::after {
            content:'';
            display:block;
            position:absolute;
            left:48%;top:40%;
            width:40px;height:40px;
            border-style:solid;
            border-color:#ddd;
            border-top-color:transparent;
            border-width: 4px;
            border-radius:50%;
            -webkit-animation: spin .8s linear infinite;
            animation: spin .8s linear infinite;
        }

        .label-modal {
            padding-top: 10px;
            padding-left: 80px;
        }

        .blueLink {
            font-size:  12px;
            font-weight:  bold;
            color: #4a81ff;
        }

        .blueLink:hover {
            cursor:  pointer;
        }
    </style>
@endsection
@section('body_content')
<div id="cover-spin"></div>
<div class="container body">
    <div class="main_container">
        @include('includes.sidebar')
        <div class="right_col" role="main">
            <div class="row">
                <div class="col-md-8">
                    <div class="page-title">
                        <div class="title_left">
                            <h3><i class="fa fa-file-text"></i> Transaction Detail</h3>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
                <div class="col-md-4 text-right" style="padding-top: 20px;">
                    <a href="{{ url('resell_marketplace/standby_user/' . $transaction_buy->standby_user_id) }}" class="btn btn-default"><i class="fa fa-arrow-left"></i> Back</a>
                </div>
            </div>

            <div class="row">                
                <div class="col-xs-12">
                    <div class="x_panel" style="background: #fffffc;">                        
                        <div class="x_content">
                            <form class="form-horizontal" method="GET">
                                <div class="row">
                                    <div class="col-sm-12 col-md-3">
                                        <a href="{{ env('ALIYUN_OSS_IMAGE_URL') . '/' . env('ALIYUN_OSS_FOLDER') . '/tanda_pengenal/' . $transaction_buy->customer->image_tanda_pengenal }}" class="text-success" style="font-weight: bold;">
                                            <img src="{{ env('ALIYUN_OSS_IMAGE_URL') . '/' . env('ALIYUN_OSS_FOLDER') . '/tanda_pengenal/' . $transaction_buy->customer->image_tanda_pengenal }}" width="100%" style="padding: 3px; border: 1px solid #eee;">
                                        </a>
                                    </div>
                                    <div class="col-xs-12 col-sm-12 col-md-9" style="font-size: 15px; padding: 30px 20px;">
                                        <div class="col-xs-12 col-sm-8">
                                            <div class="row form-group">
                                                <label class="col-xs-12 col-sm-3 control-label">Name</label>
                                            <div class="col-xs-12 col-sm-9">{{ ucwords($transaction_buy->customer_name) }}</div>
                                            </div>
                                        </div>
                                        <div class="col-xs-12 col-sm-8">
                                            <div class="row form-group">
                                                <label class="col-xs-12 col-sm-3 control-label">Handphone</label>
                                            <div class="col-xs-12 col-sm-9">{{ $transaction_buy->customer_handphone }}</div>
                                            </div>
                                        </div>
                                        <div class="col-xs-12 col-sm-8">
                                            <div class="row form-group">
                                                <label class="col-xs-12 col-sm-3 control-label">Email</label>
                                            <div class="col-xs-12 col-sm-9">{{ $transaction_buy->customer->email }}</div>
                                            </div>
                                        </div>
                                        <div class="col-xs-12 col-sm-8">
                                            <div class="row form-group">
                                                <label class="col-xs-12 col-sm-3 control-label">Grand Total</label>
                                            <div class="col-xs-12 col-sm-9">Rp. {{ number_format($transaction_buy->grandtotal) }}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>



            <div id="itemDetails" class="row">                
                <div class="col-xs-12">
                    <div class="x_panel">            
                        <div class="x_content">
                            <div class="row" style="border-bottom: 1px solid #ddd; margin-bottom: 3px;">
                                <div class="col-xs-12 col-sm-12 col-md-7">
                                    <h2>Summary</h2>    
                                </div>
                                <div class="col-xs-12 col-sm-12 col-md-5 text-right"></div>
                            </div>        
                            <table id="table_subscriber" class="table table-striped">
                                <thead>
                                    <tr>
                                        <th class="text-center">Image</th>
                                        <th class="text-center">Brand</th>
                                        <th class="text-center">Certificate Number</th>
                                        <th class="text-center">Type</th>
                                        <th class="text-right">Weight</th>
                                        <th class="text-right">Carat</th>
                                        <th class="text-right">Price</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($transaction_buy->detail as $no => $transaction_detail)
                                        <tr>
                                            <td class="text-center">
                                                @if(count($transaction_detail->invoice_detail_image)>0)
                                                    @foreach($transaction_detail->invoice_detail_image as $k=>$v)
                                                        <a href="{{ $img_url . '/' . $v->image }}" target="_blank">
                                                            <img src="{{ $img_url . '/' . $v->image }}" height="60" style="padding: 2px; border: 1px solid #eee;"/>
                                                        </a>
                                                    @endforeach
                                                @endif
                                            </td>
                                            <td class="text-center">{{ $transaction_detail->item_brand->brand_name }}</td>
                                            <td class="text-center">{{ $transaction_detail->plu }}</td>
                                            <td class="text-center">{{ $transaction_detail->item_type->type }}</td>
                                            <td class="text-right">{{ $transaction_detail->weight }}</td>
                                            <td class="text-right">{{ $transaction_detail->item_carat->carat_text }}</td>
                                            <td class="text-right">{{ number_format($transaction_detail->price) }}</td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="11" class="text-center">Data not found</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @include('includes.footer')
    </div>
</div>

@endsection

@section('scripts')
@endsection