@extends('operations.layout.mainlayout')

@section('content')
    {{--@if(session('role') != 4 && session('role') != 2 && session('role') != 5 && session('role') != 9 && session('role') != 1)
        {{exit("<h1>Unauthorized access</h1>")}}
    @endif--}}
    <style>
        .dataTable > thead > tr > th[class*="sort"]:before,
        .dataTable > thead > tr > th[class*="sort"]:after {
            content: "" !important;
        }


        table.table-bordered.dataTable tbody th, table.table-bordered.dataTable tbody td {
            border: 1px solid #ddd !important;
        }

        table.dataTable tbody th, table.dataTable tbody td {
            padding: 4px 7px;
        }

        #warehouse-items-table tr td {
            height: 10px !important;
        }

        .table > tfoot > tr > th {
            background-color: #f5f5f5;
        }

        .table > tfoot > tr {
            border: 1px solid #ddd;;
        }

        .table thead th {
            padding: 5px 5px;
        }

        .input-group-addon:first-child {
            border-right: 0;
            padding-left: 10px;
            padding-right: 10px;
        }

        .well {
            border: 1px solid #ddd;
            background-color: #f6f6f6;
            box-shadow: none;
            padding: 9px;
            border-radius: 3px;
        }

        .well-sm {
            min-height: 20px;
        }

        .panel {
            margin-bottom: 15px;
            border-radius: 0;
            box-shadow: none;
            background-color: #fff;
            border: 1px solid transparent;
        }

        .panel-warning > .panel-heading {
            color: #8a6d3b;
            background-color: #fcf8e3;
            border-color: #faebcc;
        }

        .panel-warning {
            border-color: #faebcc;
        }

        .panel-body {
            padding: 5px;
        }

        .panel-heading {
            border-radius: 0;
            font-weight: 700;
            padding: 10px 15px;
            border-bottom: 1px solid transparent;
        }

        .introtext {
            background: #f9f9f9;
            margin: -20px -20px 20px;
            padding: 10px;
            border-bottom: 1px solid #dbdee0;
        }

        #description {
            font-family: Roboto;
            font-size: 15px;
            font-weight: 300;
        }

        .red-star {
            color: red;
        }

        #infowindow-content .title {
            font-weight: bold;
        }

        #infowindow-content {
            display: none;
        }

        #map #infowindow-content {
            display: inline;
        }

        .pac-card {
            margin: 10px 10px 0 0;
            border-radius: 2px 0 0 2px;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            outline: none;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
            background-color: #fff;
            font-family: Roboto;
        }

        #pac-container {
            padding-bottom: 12px;
            margin-right: 12px;
        }

        .pac-controls {
            display: inline-block;
            padding: 5px 11px;
        }

        .pac-controls label {
            font-family: Roboto;
            font-size: 13px;
            font-weight: 300;
        }

        #pac-input {
            background-color: #fff;
            font-family: Roboto;
            font-size: 15px;
            font-weight: 300;
            margin-left: 12px;
            padding: 0 11px 0 13px;
            text-overflow: ellipsis;
            width: 400px;
        }

        #pac-input:focus {
            border-color: #4d90fe;
        }

        #title {
            color: #fff;
            background-color: #4d90fe;
            font-size: 25px;
            font-weight: 500;
            padding: 6px 12px;
        }

        #target {
            width: 345px;
        }

        .pac-container {
            z-index: 10000 !important;
        }

        .wizard > .content > .body {
            position: relative !important;
        }
    </style>
    <style>
        .cards tbody tr {
            float: left;
            width: 19rem;
            margin: 0.5rem;
            border: 0.0625rem solid rgba(0, 0, 0, .125);
            border-radius: .25rem;
            box-shadow: 0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.25);
        }

        .cards tbody td {
            display: block;
        }

        .cards thead {
            display: none;
        }

        .cards td:before {
            content: attr(data-label);
            position: relative;
            float: left;
            color: #808080;
            min-width: 4rem;
            margin-left: 0;
            margin-right: 1rem;
            text-align: left;
        }

        tr.selected td:before {
            color: #CCC;
        }

        .table .avatar {
            width: 50px;
        }

        .cards .avatar {
            width: 110px;
            margin: 15px;
        }

        #booking-users-table td {
            padding-bottom: 0;
        }

        #booking-users-table td:last-child {
            padding-bottom: 10px;
        }

        .buttons-csv {
            display: none !important;
        }

        .sw-theme-dots > .nav .nav-link.done {
            color: #e35a80;
            cursor: pointer;
        }

        .sw-theme-dots > .nav .nav-link.done::after {
            background-color: #e35a80;
        }

        .modal-title {
            width: 90%;
        }

        blinkid-in-browser {
            /* Customization of UI - see variables in src/components/shared/styles/_globals.scss */
            /* --mb-component-background: red; */
        }

        tr[aria-expanded="true"] td:first-child {
            background: url(https://www.datatables.net/examples/resources/details_close.png) no-repeat center center !important;
            cursor: pointer;
        }

        tr.accordion-toggle td:first-child {
            background: url(https://www.datatables.net/examples/resources/details_open.png) no-repeat center center;
            cursor: pointer;
        }

        /*tr.accordion-toggle td.show {
            background: url(https://datatables.yajrabox.com/images/details_close.png) no-repeat center center;
        }*/

        .table-hover tbody tr:hover {
            color: unset;
            background-color: unset;
        }

        .disabled {
            pointer-events: none;
        }

        .hiddenRow {
            padding: 0.5px !important;
        }
    </style>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid card">
                <div class="row mb-2">
                    <div class="col-sm-6 card-body">
                        @if($transferItems->TRANSFER_TYPE == \App\Models\PROFILEINVMAINTRANSACTION::TRANSFER_RETURNS)
                        <h1 class="m-0 text-dark" style="color: #e35a80!important;">Returns Items</h1>
                        @else
                            <h1 class="m-0 text-dark" style="color: #e35a80!important;">Transfer Items</h1>
                        @endif
                    </div><!-- /.col -->
                    <div class="col-sm-6">

                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->

        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-1"></div>
                    <div class="col-md-10">

                        <!-- /.card -->

                        <div class="card">
                            <div class="card-header">
                                @if($transferItems->TRANSFER_TYPE == \App\Models\PROFILEINVMAINTRANSACTION::TRANSFER_RETURNS)
                                <h4 style="color: #e35a80"><i class="fa-fw fa fa-info-circle"></i>Returned Details</h4>
                                @else
                                    <h4 style="color: #e35a80"><i class="fa-fw fa fa-info-circle"></i>Transfer Details</h4>
                                @endif
                            </div>

                            <div class="card-body">
                                <button style="display:none;" id="loading" class="btn btn-primary float-right"
                                        type="button" disabled>
                                    <span class="spinner-border spinner-border-sm" role="status"
                                          aria-hidden="true"></span>
                                    Loading...
                                </button>
                                <br/>
                                @if(!empty($error))
                                    <div class="alert alert-danger" role="alert">
                                        {{$error}}
                                    </div>
                                @endif

                                <div class="row form-group">
                                    <div class="col-md-6">
                                        <label for="po_date">Date</label>
                                        <input style="padding:15px" class="form-control" disabled type="date"
                                               id="transfer_date"
                                               name="transfer_date">
                                    </div>

                                </div>
                                <div class="row form-group">
                                    @if($transferItems->TRANSFER_TYPE == \App\Models\PROFILEINVMAINTRANSACTION::TRANSFER_RETURNS)

                                        <div class="col-md-12">
                                            <label for="reference_no">From Location</label>
                                            <select disabled name="from_location" id="from_location">
                                                <option value="" disabled
                                                        selected>{{ $transferItems->fromLocation->text }}</option>
                                            </select>
                                        </div>
                                    @else
                                        <div class="col-md-6">
                                            <label for="reference_no">From Location</label>
                                            <select disabled name="from_location" id="from_location">
                                                <option value="" disabled
                                                        selected>{{ $transferItems->fromLocation->text }}</option>
                                            </select>
                                        </div>
                                        <div class="col-md-6">
                                            <label for="reference_no">To Location</label>
                                            <select name="to_location" disabled id="to_location">
                                                <option value="" disabled
                                                        selected>{{ $transferItems->toLocation->text }}</option>
                                            </select>
                                        </div>
                                    @endif

                                </div>

                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="panel panel-warning">
                                            <div class="panel-heading" style="text-align: center">
                                                @if($transferItems->TRANSFER_TYPE == \App\Models\PROFILEINVMAINTRANSACTION::TRANSFER_RETURNS)
                                                Items returned list
                                                @else
                                                    Items transferred list
                                                @endif
                                            </div>
                                            <div class="panel-body" style="padding: 5px; text-align: -webkit-center;">
                                                <div class="col-md-12 form-group pt-2">
                                                    <div class="control-group table-group">
                                                        <div class="controls table-controls">
                                                            <table class="table items table-striped table-bordered table-condensed table-hover sortable_table">
                                                                <thead>
                                                                <tr>
                                                                    <th></th>
                                                                    <th>Transfer (ID)</th>
                                                                    <th>Item (Code - Name)</th>
                                                                    @if($transferItems->TRANSFER_TYPE == \App\Models\PROFILEINVMAINTRANSACTION::TRANSFER_RETURNS)
                                                                    <th>Returned Qty</th>
                                                                    <th>Returned By</th>
                                                                    <th>Returned At</th>
                                                                    @else
                                                                        <th>Transferred Qty</th>
                                                                        <th>Transferred By</th>
                                                                        <th>Transferred At</th>
                                                                    @endif
                                                                </tr>
                                                                </thead>
                                                                <tbody>
                                                                @foreach($transferItems->TRANSACTIONS as $transfer)
                                                                    @if($transfer->ITEM->HAS_LINE_ITEM == 0)
                                                                        <tr>
                                                                    @else
                                                                        <tr data-toggle="collapse"
                                                                            data-target="#acc-{{ $transfer->TRANSACTION_ID }}"
                                                                            class="accordion-toggle">
                                                                            @endif
                                                                            <td></td>
                                                                            <td>{{ $transfer->TRANSACTION_ID }}</td>
                                                                            <td>{{ $transfer->ITEM->NAME_EN }}</td>
                                                                            <td>{{ str_replace('-', '', $transfer->TOTAL_QTY) }}</td>
                                                                            <td>{{ $transferItems->createdBy->USERNAME }}</td>
                                                                            <td>{{ $transferItems->created_at }}</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td colspan="6" class="hiddenRow">
                                                                                <div style="padding: 5px"
                                                                                     id="acc-{{ $transfer->TRANSACTION_ID }}"
                                                                                     class="accordian-body collapse">
                                                                                    <table class="table table-striped">
                                                                                        <thead style="background: darkgray;">
                                                                                        <tr>
                                                                                            <th>Serial Number</th>
                                                                                            <th>Expiry Date</th>
                                                                                        </tr>
                                                                                        </thead>
                                                                                        <tbody>
                                                                                        @foreach($transfer->serials as $serial)
                                                                                            <tr>
                                                                                                <td>{{ $serial['SERIAL_NUMBER'] }}</td>
                                                                                                <td>{{ $serial['EXPIRY_DATE'] }}</td>
                                                                                            </tr>
                                                                                        @endforeach
                                                                                        </tbody>
                                                                                    </table>
                                                                                </div>
                                                                            </td>
                                                                        </tr>
                                                                        @endforeach
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>


                            </div>


                            <!-- /.card-body -->
                        </div>
                        <!-- /.card -->
                    </div>
                    <div class="col-md-1"></div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.container-fluid -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

@endsection

@section('warehouse_scripts')

    <script>

        $(document).ready(function () {

            var today = new Date().toISOString().split('T')[0];
            $("#transfer_date").val(today);

            $('#from_location').select2();
            $('#to_location').select2();
        });
    </script>
@endsection