@push('styles')
    <style>
        div#table-1_wrapper {
            max-width: 1000px;
            min-width: 1500px;
        }

        .theme-white .page-item.active .page-link {
            color: #274e75;
            background-color: #3abaf4;
            border-color: #3abaf4;
        }

        li.paginate_button.page-item.active {
            background-color: transparent !important;
        }
    </style>
@endpush
<div class="card">
    <div class="card-header">
        <div class="col-md-12">

            <a href=""></a>
            <button type="button" wire:click="exportshipping" class="btn btn-primary text-light float-right">
                <i class="fa fa-download" aria-hidden="true"></i> Export
            </button>
        </div>
    </div>
    @if (session()->has('message'))
        @php
            $message = json_decode(session()->get('message'));
        @endphp
        <div class="alert alert-{{ $message->type }} alert-dismissible fade show" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            <strong>{{ $message->title }}</strong> {{ $message->message }}
        </div>
    @endif
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-striped shipping_table">
                <div class="dataTables_wrapper container-fluid dt-bootstrap4 no-footer">
                    <div class="row">
                        <div class="col-sm-12 col-md-4">
                            <div class="dataTables_length">
                                <label>By Client/Supplier:</label>
                                <select class="form-control w-50" wire:model="byClient">
                                    <option value="">Select Client/Supplier</option>
                                    @php
                                        $options = [];
                                        
                                    @endphp
                                    @forelse($filters as $shipping)
                                        @php
                                            if ($shipping->shipable_type == 'App\Models\Purchase' && $shipping->shipable) {
                                                if (!in_array($shipping->client, $options)) {
                                                    $options[] = $shipping->client;
                                                }
                                            } elseif ($shipping->shipable_type == 'App\Models\Sale' && $shipping->shipable) {
                                                if (!in_array($shipping->client, $options)) {
                                                    $options[] = $shipping->client;
                                                }
                                            }
                                            if ($shipping->shipping_type) {
                                                if (!in_array($shipping->shipping_type, $options)) {
                                                    $options[] = $shipping->shipping_type;
                                                }
                                            }
                                        @endphp
                                    @empty
                                    @endforelse
                                    @forelse ($options as $opt)
                                        <option value="{{ $opt }}">{{ $opt }}</option>
                                    @empty
                                        <option value="">No Client/Supplier</option>
                                    @endforelse
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-4">
                            <div class="dataTables_length">
                                <label>By Date:</label>
                                <select class="form-control w-50" wire:model="byDate">
                                    <option value="">Select Date</option>
                                    @forelse($filters as $shipping)
                                        <option value=" {{ date('Y-m-d', strtotime($shipping->shipping_date)) }}">
                                            {{ date('Y-m-d', strtotime($shipping->shipping_date)) }}</option>
                                    @empty
                                        <option value="">No Date</option>
                                    @endforelse
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-4">
                            <div class="dataTables_length">
                                <label>By Status:</label>
                                <select class="form-control w-50" wire:model.lazy="byStatus">
                                    <option value="">Select Status</option>
                                    <option value="Shipped">Shipped</option>
                                    <option value="Delayed">Delayed</option>
                                    <option value="Delivered">Delivered</option>

                                </select>
                            </div>
                        </div>
                    </div>
                    <br />
                    <div class="row">
                        <div class="col-sm-12 col-md-6">
                            <div class="dataTables_length">
                                <label>Show
                                    <select class="form-control form-control-sm" wire:model="sortNo">
                                        <option value="10">10</option>
                                        <option value="25">25</option>
                                        <option value="50">50</option>
                                        <option value="100">100</option>
                                    </select> entries
                                </label>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-6">
                            <div class="dataTables_filter">
                                <label>Search:
                                    <input type="text" wire:model='search' class="form-control form-control-sm"
                                        placeholder="Seaching" />
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <thead>
                    <tr>
                        <th>
                            <input type="checkbox" wire:model='selected' />
                        </th>
                        <th wire:click='sortBy("shipping_date","{{ $sortDirection === 'ASC' ? 'DESC' : 'ASC' }}")'>
                            Date <i class="fa fa-fw fa-sort"></i></th>
                        <th>Invoice Type</th>
                        <th>Supplier/Client</th>
                        {{-- @dd($show) --}}
                        @if ($show != 'rma')
                            <th>Invoice #</th>
                        @endif
                        <th>Logistics Company</th>
                        <th wire:click='sortBy("tracking_no","{{ $sortDirection === 'ASC' ? 'DESC' : 'ASC' }}")'>
                            Tracking No # <i class="fa fa-fw fa-sort"></i></th>
                        <!-- <th>Logistics Invoice</th> -->
                        {{-- <th>Logistics Fee</th> --}}
                        <th>Status </th>
                        {{-- <th>Action</th> --}}
                    </tr>
                </thead>
                <tbody>
                    @forelse($shippings as $shipping)
                        @php
                            if ($shipping->shipable_type == 'App\Models\Purchase' && $shipping->shipable) {
                                $invoiceType = 'Purchase';
                                $invoice = $shipping->shipable->purchase_invoice;
                            } elseif ($shipping->shipable_type == 'App\Models\Sale' && $shipping->shipable) {
                                $invoiceType = 'Sale';
                                $invoice = $shipping->shipable->sale_invoice;
                            }
                            if ($shipping->shipping_type) {
                                $shipping->client = $shipping->shipping_type;
                                $invoiceType = 'RMA';
                            }
                        @endphp
                        <tr>
                            <td>
                                <input type="checkbox" value="{{ $shipping->id }}"
                                    wire:model="selectedShippings.{{ $shipping->id }}" />
                            </td>
                            {{-- <td>{{$shipping->id}}</td> --}}
                            <td>{{ date('d-m-Y', strtotime($shipping->shipping_date)) }}</td>
                            <td>
                                <span @class([
                                    'badge badge-pill',
                                    'badge-primary' => $invoiceType == 'Purchase',
                                    'badge-info' => $invoiceType == 'Sale',
                                    'badge-danger' => $invoiceType == 'RMA',
                                ])>{{ $invoiceType }}</span>
                            </td>
                            <td>{{ $shipping->client }}</td>
                            @if ($show != 'rma')
                                <td>
                                    @if ($invoiceType == 'Purchase')
                                        {{ $shipping->shipable->purchase_invoice }}
                                    @elseif($invoiceType == 'Sale')
                                        {{ $shipping->shipable->sale_invoice }}
                                    @endif
                                </td>
                            @endif
                            <td>{{ $shipping->logistic_company }}</td>
                            <td>{{ $shipping->tracking_no }}</td>
                            {{-- <td>{{$shipping->logistic_invoice}}</td> --}}
                            {{-- <td>{{$shipping->logistic_fee}}</td> --}}
                            @if (auth()->user()->role->name == 'staff')
                                <td>
                                    @if (auth()->user()->is_edit == 1)
                                        @if (!$shipping->shipping_type)
                                            <select class="form-control" name="status"
                                                wire:change="changeState({{ $shipping->id }},$event.target.value);">
                                            @else
                                                <select class="form-control" name="status"
                                                    wire:change="changeState({{ $shipping->id }},$event.target.value,true);">
                                        @endif
                                        @foreach (['Shipped', 'Delayed', 'Delivered'] as $st)
                                            <option value="{{ $st }}"
                                                @if ($st == $shipping->status) selected @endif> {{ $st }}
                                            </option>
                                        @endforeach </select>
                                    @else
                                    @endif
                                </td>
                            @else
                                <td>
                                    @if (!$shipping->shipping_type)
                                        <select class="form-control" name="status"
                                            wire:change="changeState({{ $shipping->id }},$event.target.value);">
                                        @else
                                            <select class="form-control" name="status"
                                                wire:change="changeState({{ $shipping->id }},$event.target.value,true);">
                                    @endif
                                    @foreach (['Shipped', 'Delayed', 'Delivered'] as $st)
                                        <option value="{{ $st }}"
                                            @if ($st == $shipping->status) selected @endif> {{ $st }}
                                        </option>
                                    @endforeach </select>
                                </td>
                            @endif
                            {{-- <td>
                                <a href="{{route('edit_shipping',['id'=>$shipping->id])}}"  class="btn btn-info"><i class="fa fa-edit"></i></a>
                                <a href="#" wire:click.prevent="deleteShipping({{ $shipping->id }})" class="btn btn-info"><i class="fa fa-trash"></i></a>
                            </td> --}}
                        </tr>
                    @empty
                        <tr>
                            <td>No Data!</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>

        </div>
        <div class="row">
            <div class="col-md-6 text-light">
                Showing {{ $shippings->firstItem() }} to {{ $shippings->lastItem() }} of
                {{ $shippings->total() }}
                results
            </div>
            <div class="col-md-6">
                <div class="float-right">
                    {{ $shippings->links() }}
                </div>
            </div>
        </div>
        <br>
        @if ($show != 'rma')
            <button class="btn btn-danger " style="color:white;"
                wire:click="setShow('rma');">&nbsp;&nbsp;RMA-Shipings&nbsp;&nbsp;</button>
        @else
            <button class="btn btn-primary " style="color:white;"
                wire:click="setShow('sales&purchase');">&nbsp;&nbsp;Sales
                & Purchases&nbsp;&nbsp;</button>
        @endif
    </div>
</div>
@push('scripts')
    <script>
        $(document).ready(function() {
            $('#ship').addClass('active');
            $('#manager').removeClass('active');
            $('#mycomapny').removeClass('active');
            $('#employee').removeClass('active');
            $('#rma').removeClass('active');
            $('#prod').removeClass('active');
            $('#supp').removeClass('active');
            $('#client').removeClass('active');
            $('#sales').removeClass('active');

            $('#purch').removeClass('active');
        });
    </script>
@endpush