@extends('layouts.layout')
@section('body_class', 'nav-md')
@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="row">
                    <div class="col-xs-8">
                        <div class="title_left">
                            <h3>Butik Emas Box List</h3>
                        </div>
                    </div>
                    <div class="col-xs-4">
                        <div class="text-right">
                            <a href="{{ route('butik/resell/box/detail/move_history', ['id'=>$box->id]) }}" target="_blank" class="btn btn-default"><i class="fa fa-history" aria-hidden="true"></i> Movement Log</a>
                            @if(count($box->move_log) > 0 && $box->move_log[0]->status == '1')
                                <button type="button" class="btn btn-default btn-receive"><i class="fa fa-sign-in" aria-hidden="true"></i> Receive</button> 
                            @endif
                            @if((isset($box->store->store_hub) && $box->status === 'active') && $is_qc_hub && $has_invoice)
                                <button type="button" class="btn btn-default btn-unload"><i class="fa fa-sign-in" aria-hidden="true"></i> Unload Items</button> 
                            @endif
                            @if($box->status == 'moving')
                                <a href="{{ route('butik/resell/box/detail/print_manifest', ['id'=>$box->id]) }}" target="_blank" class="btn btn-default" target="_blank"><i class="fa fa-print"></i> Print Manifest</a>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>

            <div class="row">
                <div class="col-xs-6">
                    <div class="x_panel">                        
                        <div class="x_content">
                            <form class="form-horizontal" id="form">
                                <div class="form-group">
                                    <label class="col-xs-12 col-sm-3 control-label">ID :</label>
                                    <div class="col-xs-12 col-sm-9">
                                        <input type="text" id="id" disabled="disabled" value="{{ $box->id }}" class="form-control">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-xs-12 col-sm-3 control-label">Box Code :</label>
                                    <div class="col-xs-12 col-sm-9">
                                        <input type="text" id="code" disabled="disabled" value="{{ $box->code }}" class="form-control">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-xs-12 col-sm-3 control-label">Status :</label>
                                    <div class="col-xs-12 col-sm-9">                                    
                                        @if(in_array($box->status, ['active', 'pending']))
                                        <select class="form-control" name="status">
                                            <option value="active" @if($box->status == 'active') selected @endif>Active</option>
                                            <option value="pending" @if($box->status == 'pending') selected @endif>Pending</option>
                                        </select>
                                        @endif

                                        @if($box->status == 'moving')
                                            <input type="text" disabled="disabled" value="{{ $box->status }}" class="form-control">
                                        @endif
                                    </div>
                                </div>
                                <div class="text-right">
                                    <button type="submit" class="btn btn-default btn-save"><i class="fa fa-check" aria-hidden="true"></i> Save</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                @if($box->status == 'active')
                    <div class="col-xs-6">
                        <div class="x_panel">                        
                            <div class="x_content">                                
                                <form class="form-horizontal" id="form-movement">
                                    <div class="form-group">
                                        <label class="col-xs-12 col-sm-3 control-label">From :</label>
                                        <div class="col-xs-12 col-sm-9">
                                            <input type="hidden" id="store_id" value="{{ $box->store_id }}">
                                            <input type="text" class="form-control" disabled="disabled" value="@if($box->store_id == '0') Central @else {{ $box->store->brand->name }} {{ $box->store->name }} @endif">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-xs-12 col-sm-3 control-label">To :</label>
                                        <div class="col-xs-12 col-sm-9">
                                            <select class="form-control" name="store_to" id="store_to_id">
                                                <option value="0">Central</option>
                                                @foreach($store_brands as $store_brand)
                                                    @foreach($store_brand->store as $store)
                                                        <option value="{{ $store->id }}">{{ $store_brand->name }} {{ $store->name }}</option>
                                                    @endforeach
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-xs-12 col-sm-3 control-label">Remark :</label>
                                        <div class="col-xs-12 col-sm-9">
                                            <textarea class="form-control" name="remark"></textarea>
                                        </div>
                                    </div>
                                    <div class="text-right">
                                        <button type="submit" class="btn btn-default btn-save"><i class="fa fa-check" aria-hidden="true"></i> Submit</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                @endif
            </div>

            <div class="row">                
                <div class="col-xs-12">
                    <div class="x_panel">                        
                        <div class="x_content">
                            <div class="text-right">
                                <a href="{{ route('butik/resell/box/detail/download', ['id'=>$box->id]) }}" class="btn btn-default">Download</a>
                            </div>
                            <table class="table table-bordered table-striped">
                                <thead>
                                    <tr>                                
                                        <th class="text-center">Invoice</th>                          
                                        <th class="text-center">Brand</th>
                                        <th class="text-center">Type</th>
                                        <th class="text-center">Carat</th>
                                        <th class="text-right">Weight</th>
                                        <th class="text-center">Image</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($box->invoice as $invoice)
                                        @php $i=0 @endphp
                                        @foreach($invoice->detail as $item)
                                            <tr>
                                                @if($i == 0)
                                                    <td class="text-center" rowspan="{{ count($invoice->detail) }}">{{ $invoice->invoice }}</td>
                                                @endif
                                                <td class="text-center">{{ $item->item_brand->brand_name }}</td>
                                                <td class="text-center">{{ $item->item_type->type }}</td>
                                                <td class="text-center">{{ $item->item_carat->carat }}</td>
                                                <td class="text-right">{{ $item->weight }}</td>
                                                <td class="text-center">
                                                    <a href="{{ env('ALIYUN_OSS_IMAGE_URL_BUTIK') }}/item/{{ $item->image }}" target="_blank">
                                                        <img src="{{ env('ALIYUN_OSS_IMAGE_URL_BUTIK') }}/item/{{ $item->image }}" height="30" />
                                                    </a>
                                                </td>
                                            </tr>
                                            @php $i++ @endphp
                                        @endforeach
                                    @empty
                                        <tr>
                                            <td colspan="6" class="text-center">No Data</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @include('includes.footer')
    </div>
</div>
@endsection

@section("scripts")
@include('includes.helper_js')
<script type="text/javascript">
    $("#form").on("submit", function() {
        $("#form .btn-save").attr("disabled", "disabled").html('<i class="fa-li fa fa-spinner fa-spin"></i>');
        $.ajax({
            url: '{{ $box->id }}/save',
            method: "POST",            
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},     
            data: $("#form").serialize(),   
            success: function(response) {
                alert("Data saved");
                location.reload();
            },
            error: function(response) {
                var data = response.responseJSON;
                alert(data.error);
                $("#form .btn-save").removeAttr("disabled").html('<i class="fa fa-check" aria-hidden="true"></i> Save');
            }
        });
        return false;
    })

    $("#form-movement").on("submit", function() {
        $("#form .btn-save").attr("disabled", "disabled").html('<i class="fa-li fa fa-spinner fa-spin"></i>');
        $.ajax({
            url: '{{ $box->id }}/move',
            method: "POST",            
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},     
            data: $("#form-movement").serialize(),   
            success: function(response) {
                alert("Data saved");
                location.reload();
            },
            error: function(response) {
                var data = response.responseJSON;
                alert(data.error);
                $("#form .btn-save").removeAttr("disabled").html('<i class="fa fa-check" aria-hidden="true"></i> Submit');
            }
        });
        return false;
    })

    $(".btn-receive").on("click", function() {
        $(".btn-receive").attr("disabled", "disabled").html('<i class="fa-li fa fa-spinner fa-spin"></i>');
        $.ajax({
            url: '{{ $box->id }}/receive',
            method: "POST",            
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},             
            success: function(response) {
                alert("Box received");
                location.reload();
            },
            error: function(response) {
                var data = response.responseJSON;
                alert(data.error);
                $(".btn-receive").removeAttr("disabled").html('<i class="fa fa-sign-in" aria-hidden="true"></i> Receive');
            }
        });
        return false;
    })

    $(".btn-unload").on("click", function() {
        let id = $('#id').val();
        let store_id = $('#store_id').val();
        let store_to_id = $('#store_to_id').val();
        $(".btn-unload").attr("disabled", "disabled").html('<i class="fa-li fa fa-spinner fa-spin"></i>');
        $.ajax({
            url: Helper.url('/butik/resell/box/'+id+'/unload'),
            method: "POST",   
            // headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}, 
            data: {
                resellbox_id: id,
                received_from_store_id: store_id,
                unload_store_id: store_to_id
            }, 
            success: function(response) {
                console.log(response);
                alert("Box unloaded");
                location.reload();
            },
            error: function(response) {
                var data = response.responseJSON;
                alert(data.error);
                $(".btn-unload").removeAttr("disabled").html('<i class="fa fa-sign-in" aria-hidden="true"></i> Unload');
            }
        });
        return false;
    })
</script>
@endsection