@extends('header.header')
@section('content')
    <div class="header bg-primary pb-6  pt-5">
        <div class="container-fluid">
            <div class="header-body">
                <div class="row align-items-center py-4">
                    <div class="col-lg-6 col-7">
                        <h6 class="h2 text-white d-inline-block mb-0">{{__('Orders')}}</h6>
                        <nav aria-label="breadcrumb" class="d-none d-md-inline-block ml-md-4">
                            <ol class="breadcrumb breadcrumb-links breadcrumb-dark">
                                <li class="breadcrumb-item"><a href="#"><i class="fas fa-home"></i></a></li>
                                <li class="breadcrumb-item"><a href="/">{{__('Dashboard')}}</a></li>
                                <li class="breadcrumb-item active" aria-current="page">{{__('Orders Tables')}}</li>
                            </ol>
                        </nav>
                    </div><br>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <div class="card">
                <!-- Card header -->
                <form action="{{route('reports.index')}}" method="GET" >
                    <div class="d-flex">
                        <div class="col-lg-3 mt-3">
                            <label class="control-label">{{__("Classification")}}</label>
                            <select class="form-control"  id="classification" name="classificate">
                                <option value="all" selected>{{__('All Classification')}}</option>
                            @foreach($classifications as $classification)
                                    @if($classification->id === $classificate)
                                        <option value="{{$classification->id}}">{{$classification->name_.\Illuminate\Support\Facades\App::getLocale() == "en" ? $classification->name_en : $classification->name_ar}}</option>
                                    @else
                                        <option value="{{$classification->id}}" >{{$classification->name_.\Illuminate\Support\Facades\App::getLocale() == "en" ? $classification->name_en : $classification->name_ar}}</option>
                                    @endif
                                @endforeach
                            </select>
                        </div>
                        <div class="col-lg-3 mt-3 mb-3" style="display: none" id="typeOf" >
                            <label class="control-label">{{__("Select Store")}}</label>
                            <select class="form-control"  id="typeOfOrders" name="store" >
                                <option value="classification" selected disabled>{{__('Select Store')}}</option>
                            </select>
                        </div>
                        <div class="col-lg-3 mt-3 mb-3 d-flex">
                            <div>
                                <label class="control-label" style="display: block">{{__("Start Date")}}</label>
                                <input type="date" name="start_date" class="form-control" value="{{$start_date}}"/>
                            </div>
                            <div style="margin-left: 10px">
                                <label class="control-label" style="display: block">{{__("End Date")}}</label>
                                <input type="date" name="end_date" class="form-control" value="{{$end_date}}"/>
                            </div>
                        </div>
                        <div class="col-lg-3 mt-3 m-3 d-flex">
                            <div>
                                <label class="control-label" style="display: block">{{__("Status")}}</label>
                                <select class="form-control" name="status">
                                    <option value="all">All Status</option>

                                    @if(inputValue('status') == 0)
                                        <option value="0" selected >pending</option>
                                        <option value="1">accepted</option>
                                        <option value="2">pickup</option>
                                        <option value="3">completed</option>
                                        <option value="4">Rejected</option>
                                        <option value="5">delivered</option>
                                        <option value="6">canceled</option>
                                    @elseif(inputValue('status') == 1)
                                        <option value="0">pending</option>
                                        <option value="1" selected>accepted</option>
                                        <option value="2">pickup</option>
                                        <option value="3">completed</option>
                                        <option value="4">Rejected</option>
                                        <option value="5">delivered</option>
                                        <option value="6">canceled</option>
                                    @elseif(inputValue('status') == 2)
                                        <option value="0">pending</option>
                                        <option value="1">accepted</option>
                                        <option value="2" selected>pickup</option>
                                        <option value="3">completed</option>
                                        <option value="4">Rejected</option>
                                        <option value="5">delivered</option>
                                        <option value="6">canceled</option>
                                    @elseif(inputValue('status') == 3)
                                        <option value="0">pending</option>
                                        <option value="1">accepted</option>
                                        <option value="2">pickup</option>
                                        <option value="3" selected>completed</option>
                                        <option value="4">Rejected</option>
                                        <option value="5">delivered</option>
                                        <option value="6">canceled</option>
                                    @elseif(inputValue('status') == 4)
                                        <option value="0">pending</option>
                                        <option value="1">accepted</option>
                                        <option value="2">pickup</option>
                                        <option value="3">completed</option>
                                        <option value="4" selected>Rejected</option>
                                        <option value="5">delivered</option>
                                        <option value="6">canceled</option>
                                    @elseif(inputValue('status') == 5)
                                        <option value="0">pending</option>
                                        <option value="1">accepted</option>
                                        <option value="2">pickup</option>
                                        <option value="3">completed</option>
                                        <option value="4">Rejected</option>
                                        <option value="5" selected>delivered</option>
                                        <option value="6">canceled</option>
                                    @elseif(inputValue('status') == 5)
                                        <option value="0">pending</option>
                                        <option value="1">accepted</option>
                                        <option value="2">pickup</option>
                                        <option value="3">completed</option>
                                        <option value="4">Rejected</option>
                                        <option value="5">delivered</option>
                                        <option value="6" selected>canceled</option>
                                    @endif
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 mb-5" id="button">
                        <button class="btn btn-primary" type="submit">{{__('Filter')}}</button>
                    </div>
                </form>
                <span style="position: absolute;left:90%;top: 50px"><a type="button" href="{{route('reports.export',['store'=>$store,'classificate'=>$classificate ,'start_date'=> $start_date ,'end_date'=>$end_date , 'status'=>$status ?? null])}}" style="background:#7600ff;border: none;padding: 10px;color: white;border-radius: 7px">Export<i class="fas fa-thin fa-file-excel" style="margin-left: 10px"></i></a></span>
                <!-- Light table -->
                <div class="table-responsive">
                    <table class="table align-items-center table-flush" id="sampleTable">
                        <thead class="thead-light">
                        <tr >
                            <th>{{__('ID')}}</th>
                            <th>{{__('Order Number')}}</th>
{{--                            <th>{{__('Classification')}}</th>--}}
{{--                            <th>{{__('Store Name')}}</th>--}}
                            <th>{{__('user Name')}}</th>
                            <th>{{__('Phone Number')}}</th>
                            <th>{{__('Status')}}</th>
                            <th>{{__('Payment Method')}}</th>
                            <th>{{__('Total Amount')}}</th>
                            <th>{{__('Action')}}</th>
                        </tr>
                        </thead>
                        <tbody class="list" id="myTable">
                        @foreach($orders as $index => $order)
                            <tr id="orderRow{{$order->id}}">
                                <td>{{++$index}}</td>
                                <td>{{$order->order_number}}</td>
{{--                                <td>{{$order->storename->CLASSIfication->name_en ?? null}}</td>--}}
{{--                                <td>{{$order->storename ? $order->storename->lang->getTitleAttribute() : null }}</td>--}}
                                <td>{{$order->user ? $order->user->name : null }}</td>
                                <td>{{$order->user ? $order->user->phone_number :null}}</td>
                                <td>{{$order->getStatusText()}}</td>
                                <td>{{$order->paymentMethod}}</td>
                                <td>{{$order->Total_Amount}}</td>
                                <td id="ignorStyle">
                                    <button type="button" class="btn btn-outline-default" data-toggle="modal" onclick="getItemOrder({{$order->id}})" data-target="#Orders{{$order->id}}">
                                        <i class="fas fa-eye fa-lg"></i>
                                    </button>
                                    <!-- Modal -->
                                    <div class="modal fade" id="Orders{{$order->id}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                        <div class="modal-dialog modal-lg">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                        <span aria-hidden="true">&times;</span>
                                                    </button>
                                                </div>
                                                <div class="modal-body" id="contentDownload{{$order->id}}">
                                                    <div class="card">
                                                        <div class="card-header">
                                                            <p class="font-weight-bold">{{__('Order Number')}} # {{$order->order_number}} </p>
                                                        </div>
                                                        <div class="card-body">
                                                            <blockquote class="blockquote mb-0">
                                                                <p></p>
                                                                <div class="row">
                                                                    <div class="col-12">
                                                                        <div class="card">
                                                                            <div class="card-body">
                                                                                <div class="row">

                                                                                    <div class="col-6">
                                                                                        <footer class="blockquote-footer">{{__('Order Information')}} </footer><br>
                                                                                        <p class="font-weight-bold">{{__('Store name')}}:<span class="font-weight-normal"> {{$order->storename ? $order->storename->lang->getTitleAttribute() : null}}</span></p>
                                                                                        <p class="font-weight-bold">{{__('Status')}}:<span class="font-weight-normal"> {{$order->Status}}</span></p>
                                                                                        <p class="font-weight-bold">{{__('Tax')}}:<span class="font-weight-normal"> {{$order->tax}}</span></p>
                                                                                        <p class="font-weight-bold">{{__('Order date')}}:<span class="font-weight-normal"> {{$order->created_at}}</span></p>
                                                                                        <p class="font-weight-bold">{{__('User name')}}:<span class="font-weight-normal"> {{ $order->user ? $order->user->name : null}}</span></p>
                                                                                        <p class="font-weight-bold">{{__('Mobile Number')}}:<span class="font-weight-normal"> {{$order->user ? $order->user->phone_number : null}}</span></p>
                                                                                        <p class="font-weight-bold">{{__('Total Amount')}}:<span class="font-weight-normal"> {{$order->Total_Amount}}</span></p>
                                                                                    </div>
                                                                                    <div class="col-6">
                                                                                        <footer class="blockquote-footer">{{__('Store Image')}} </footer><br>
                                                                                        <img src="{{$order->storename ? $order->storename->lang->getTitleAttribute() : null}}"  width="200">
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-12">
                                                                            <div class="card">
                                                                                <div class="card-body">
                                                                                    <div class="row">
                                                                                        <div class="col-6">
                                                                                            <footer class="blockquote-footer">{{__('Payment Method')}}</footer><br>
                                                                                            <p class="font-weight-bold">{{$order->paymentMethod}}</p>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>

                                                                        <div class="col-12">
                                                                            <div class="card">
                                                                                <div class="card-body">
                                                                                    <footer class="blockquote-footer">{{__('Address')}}</footer><br>
                                                                                    <iframe
                                                                                        id="map"
                                                                                        allowfullscreen
                                                                                        src="https://www.google.com/maps/embed/v1/place?key={{env("GOOGLE_API_KEY")}}&q={{$order->DropOffAddressLat}},{{$order->DropOffAddressLong}}">
                                                                                    </iframe>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-12">
                                                                            <div class="card">
                                                                                <div class="card-body">
                                                                                    <div class="table-responsive">
                                                                                        <footer class="blockquote-footer">{{__('Order Item table')}}</footer><br>
                                                                                        <table class="table align-items-center table-flush">
                                                                                            <thead class="thead-light">
                                                                                            <tr>
                                                                                                <th scope="col" class="sort" data-sort="budget">{{__('Item Image')}}</th>
                                                                                                <th scope="col" class="sort" data-sort="budget">{{__('Quantity')}}</th>
                                                                                                <th scope="col" class="sort" data-sort="budget">{{__('Item Price')}}</th>                                                            <th scope="col"></th>
                                                                                            </tr>
                                                                                            </thead>
                                                                                            <tbody>
                                                                                            @foreach($order->items as $items)
                                                                                                <tr>
                                                                                                    <th><img src="{{$items->item_image}}"  width="40" height="40"/></th>
                                                                                                    <th>{{{$items->quantity}}}</th>
                                                                                                    <th>{{$items->itemPrice}}</th>
                                                                                                </tr>
                                                                                            @endforeach
                                                                                            </tbody>
                                                                                        </table>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </blockquote>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">{{__('Close')}}</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!-- Dark table -->
@endsection
@section('js-scripts')
    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.22/datatables.min.js"></script>

    <script>

        $('#classification').change(function () {
            $("#typeOf").val('');
            let value = $(this).val();
            if(value) {
                $.ajax({
                    type: "GET",
                    url:  "/en/reports/orders" || "/ar/reports/orders",
                    data:   {"classification": value},
                    success: function(response)
                    {
                        console.log(response.data);
                        console.log(response.data.length);
                        if(response.status == 1){
                            let ClassificationName = response.data[0][2];
                            document.getElementById("typeOfOrders").innerHTML = "<option value='all'>All "+ ClassificationName +"</option>";
                            for (let i =0 ; i < response.data.length; i++){
                                let resturentName = response.data[i][1].translate
                                console.log(resturentName)
                                document.getElementById("typeOfOrders").innerHTML += "<option value="+response.data[i][0]+">"+ resturentName +"</option>";

                            }


                        }

                    },
                    error:function(){
                        console.error("you have error");
                        document.getElementById("typeOfOrders").innerHTML = "<option value='all'>No Data</option>";
                    }
                });
                $('#typeOf').css("display","block");
            }
        });

        // $('#typeOfOrders').change(function () {
        //     document.getElementById("button").innerHTML = "<label >________</label>"+"<br>"+"<button class='btn btn-primary' type='submit' >Filter</button>"
        // });
    </script>
    <script>
        $(document).ready(function() {
                $('#sampleTable').DataTable();
        });
    </script>
@endsection