@extends('layouts.app')

@section('content')
    <div class="row" style="margin-bottom: 15px;">
        <div class="col-md-12">
            <form class="form-inline" action="{{ route('new-format-export-logistic-report') }}" method="post">
                @csrf
                <div class="form-group">
                    <label class="sr-only" for="dateRange">Date</label>
                    <input type="text" name="dateRange" id="dateRange" class="form-control"
                           value="{{old('dateRange')}}" autocomplete="off" placeholder="Search for date ">
                </div>
                <button type="submit" class="btn btn-primary">Export Logistic Report</button>
            </form>
        </div>
    </div>

    <div class="row" style="margin-bottom: 15px;">
        <div class="col-md-12">
            <form class="form-inline">
                <div class="form-group">
                    <label class="sr-only" for="code">Order Code</label>
                    <input type="text" class="form-control" id="code" name="code" placeholder="Code"
                           value="{{ request('code') }}">
                </div>
                <div class="form-group">
                    <label class="sr-only" for="awb_number">Awb Number</label>
                    <input type="text" class="form-control" id="awb_number" name="awb_number" placeholder="Awb Number"
                           value="{{ request('variant') }}">
                </div>
                {{--               <div class="form-group">
                    <label class="sr-only" for="seller_id">Seller</label>
                    @include('components.seller-filter')
                </div>--}}

                <div class="form-group">
                    <label class="sr-only" for="shipping_service">Shipment Service</label>
                    @include('components.shipping-services-filter')
                </div>

                <div class="form-group">
                    <label class="sr-only" for="logistic_status">Shipment Service</label>
                    @include('components.logistic-statuses-filter')
                </div>
                <button type="submit" class="btn btn-primary">Search</button>
                <a href="{{route('new-format-logistic-report-form')}}" class="btn btn-warning">Reset</a>
            </form>
        </div>
    </div>

    <div class="row " style="margin-top: 5px !important;">
        <div class="col-lg-12 ">
            <div class="panel panel-primary">
                <div class="panel-heading" style="padding: 10px 15px !important;">Shipment Packages</div>
                <div class="panel-body">
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th>S.No.</th>
                            <th>Code</th>
                            <th>Awb number</th>
                            <th>Shipment</th>
                            <th>Weight</th>
                            <th>Height</th>
                            <th>Length</th>
                            <th>Breadth</th>
                            <th>Vol. Weight</th>
                            <th>Status</th>
                            <th>Date</th>
                        </tr>
                        </thead>
                        <tbody>
                        @forelse($packages as $package)
                            <tr>
                                <td>{{ $packages->firstItem() + $loop->index }}</td>
                                <td>
                                    {{ $package->order->code ?? null }}
                                </td>
                                <td>{{ $package->awb_number }}</td>
                                <td>{{ $package->shipment_service }}</td>
                                <td>{{ $package->actual_weight }}</td>
                                <td>{{ $package->height }}</td>
                                <td>{{ $package->length }}</td>
                                <td>{{ $package->breadth }}</td>
                                <td>{{ (($package->height * $package->length * $package->breadth) / 5000) }}</td>
                                <td>{{ ucwords($package->status) }}</td>
                                <td>{{ $package->created_at }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="8">No Record(s) found!</td>
                            </tr>
                        @endforelse
                        </tbody>
                    </table>
                    {{ $packages->appends(request()->input()) }}
                </div>
            </div>
        </div>
    </div>
@endsection
@push('css')
    <link rel="stylesheet" type="text/css"
          href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"/>
@endpush
@push('script')
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript"
            src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <script>
        $(function () {
            let dateRange = $('input[name="dateRange"]');
            dateRange.daterangepicker({
                autoUpdateInput: false,
                maxDate: new Date(),
                locale: {
                    cancelLabel: 'Clear'
                }
            });

            dateRange.on('apply.daterangepicker', function (ev, picker) {
                $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
            });

            dateRange.on('cancel.daterangepicker', function (ev, picker) {
                $(this).val('');
            });

        });
    </script>
@endpush