@extends('layouts.admin')

@section('title' , 'Declined Order')
@section('styles')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link href="https://unpkg.com/gijgo@1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />
@endsection
<style>
    .fullscreen-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.9);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 9999;
    }
    .fullscreen-overlay img {
        max-height: 90%;
        max-width: 90%;
    }

</style>
@section('breadcrumb-item')
    <li class="breadcrumb-item active">Declined Orders</li>
@endsection

@section('content')
    <div class="card">
        <div class="card-header bg-theme">
            <p class="h5 pt-2 mb-0 float-left"><i class="fa fa-list pr-1"></i>Declined Orders</p>
            <form action="{{route('admin.declinedOrders')}}" method="get" class="form-inline float-right">
                <div class="form-group">
                    <div class="input-group">
                        <input class="form-control" type="text" name="q" value="{{ request()->query('q') }}"
                               placeholder="Search">
                        <div class="input-group-append">
                            <button class="btn btn-success" type="submit"><i class="fa fa-search"></i></button>
                        </div>
                        <div class="input-group-append">
                            <a class="btn btn-danger{{ request()->query('q') ? '' : ' disabled' }}"
                               href="{{route('admin.declinedOrders')}}">
                                <i class="fa fa-eraser"></i></a>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="card-body" style="overflow-x: auto">
            <form action="{{ route('admin.declinedOrders.search') }}" method="POST">
                @csrf
                <div class="row">
                    <div class="col-3">
                        <div class="form-group">
                            <label>Shops</label>
                            <select class="form-control js-example-theme-multiple" name="shop_ids[]" multiple>
                                @foreach(_shops() as $shop)
                                    <option value="{{ $shop->id }}"
                                        {{ isset($shop_ids) && in_array($shop->id, $shop_ids) ? 'selected' : '' }}>
                                        {{ $shop->name }} [{{$shop->area ? $shop->area->name : ""}}]
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-3">
                        <div class="form-group">
                            <label>Employees</label>
                            <select class="form-control js-example-theme-multiple" name="employee_ids[]" multiple>
                                @foreach(_employees() as $employee)
                                    <option value="{{ $employee->id }}"
                                        {{ isset($employee_ids) && in_array($employee->id, $employee_ids) ? 'selected' : '' }}>
                                        {{ $employee->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-2">
                        <div class="form-group">
                            <label>Start Date</label>
                            <input id="datepicker1" name="start_date" value="{{ request()->start_date ?? date('Y-m-d') }}" />
                        </div>
                    </div>
                    <div class="col-2">
                        <div class="form-group">
                            <label>End Date</label>
                            <input id="datepicker2" name="end_date" value="{{ request()->end_date ?? date('Y-m-d') }}" />
                        </div>
                    </div>
                </div>
                {{-- <div class="row">
                    <div class="col-3">
                        <div class="form-group">
                            <label>Reason</label>
                            <select class="form-control js-example-theme-multiple" name="reasons[]" multiple>
                                @if(isset($uniqueReasons) && count($uniqueReasons) > 0)
                                    @foreach($uniqueReasons as $reason)
                                        <option value="{{ $reason }}" {{ isset($reasons) && in_array($reason, $reasons) ? 'selected' : '' }}>
                                            {{ $reason }}
                                        </option>
                                    @endforeach
                                @endif
                            </select>
                        </div>
                    </div>
                </div> --}}
                <div class="row mt-4">
                    <div class="col-md-12 text-center">
                        <button type="submit" class="btn btn-sm btn-success col-md-3">
                            Search
                        </button>
                    </div>
                </div>
            </form>
        </div>

        <div class="card-body" style="overflow-x: auto;">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Image</th>
                        <th>Shop</th>
                        <th>Employee</th>
                        <th>Reason</th>
                        <th>Placed On</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($orders as $key=> $order)
                        <tr>
                            <td>{{ $orders->firstItem() + $key }}</td>
                            @if($order->image)
                                <td>
                                    <a href="{{asset('storage/'.$order->image ?? null) }}" target="_blank">
                                        <img class="img app-thumbnail" src="{{asset('storage/'.$order->image ?? null) }}" alt="{{ $order->id }}">
                                    </a>
                                </td>
                            @else
                                <td>
                                    <a href="{{ asset('assets/images/image-not-available.png') }}" target="_blank">
                                        <img class="img app-thumbnail" src="{{ asset('assets/images/image-not-available.png') }}" alt="{{ $order->id }}">
                                    </a>
                                </td>
                            @endif
                            <td>{{ $order->shop->name ?? '' }}</td>
                            <td>{{ $order->employee->name ?? '' }}</td>
                            <td>{{ $order->reason ?? '' }}</td>
                            <td>{{ $order->created_at->format('M d, Y | h:i A') ?? '' }}</td>
                        </tr>
                    @empty
                        <tr>
                            <th colspan="5" class="text-center">No Orders Declined Yet</th>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="pagination justify-content-center mb-4">
            {{ $orders->appends(request()->except('page'))->links() }}
        </div>
    </div>
@endsection

@section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://unpkg.com/gijgo@1.9.13/js/gijgo.min.js" type="text/javascript"></script>

    <script>
        $(document).ready(function() {
            $('.js-example-theme-multiple').select2({
                theme: 'classic',

            });

            $('#datepicker1').datepicker({
                format: 'yyyy-mm-dd',
                uiLibrary: 'bootstrap4',
            });

            $('#datepicker2').datepicker({
                format: 'yyyy-mm-dd',
                uiLibrary: 'bootstrap4',
            });
        });
    </script>
@endsection