@extends('layouts.admin.app')

@section('page-title')
{{ __('Orders') }}
@endSection

@section('page-nav-title')
<div class="app-title">
    <div>
        <h1>{{ __('Orders') }}</h1>
        <p>{{ __('All Orders') }}</p>
    </div>
    <ul class="app-breadcrumb breadcrumb">
        <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard.index') }}">{{ __('Dashboard') }}</a></li>
        <li class="breadcrumb-item"><a href="#">{{ __('Orders') }}</a></li>
    </ul>
</div>
@endsection

@section('css-links')
<link rel="stylesheet" href="{{ asset('assets/css/' . app()->getLocale() . '/pages/orders.css') }}">
<style>
    .action-buttons {
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    .order-action-form {
        margin: 0;
    }

    .order-action-form {
        display: inline-block;
        /* Ensures forms are displayed inline */
    }

    .btn-action {
        border: none;
        background-color: transparent;
        cursor: pointer;
    }

    .btn-action:hover {
        opacity: 0.8;
    }
</style>
@endsection

@section('content')
@include('includes.dialog')

<div class="row">
    <div class="col-12">
        @include('admin.order.parts.filter')
    </div>
    <div class="row col-lg-12">
        <div class="col-lg-6 p-3 ">
            <form action="{{ route('admin.orders.export') }}" method="post" id="form-excel">
                @csrf
                <input type="hidden" name="status" value="0">
                <span class="download-excel btn btn-primary"><i class="far fa-fw fa-lg  fa-file-excel text-left"></i> {{
                    __('Export As Excel') }}</span>
            </form>
        </div>
    </div>

    <div class="col-12">
        <div class="tile">
            <div class="tile-body">
                <div class="table-responsive">
                    <table class="table table-hover table-bordered" id="sampleTable">
                        <thead>
                            <tr class="text-center">
                                <th class="text-center">#{{ __('ID') }}</th>
                                <th class="text-center">{{ __('Order Number') }}</th>
                                <th class="text-center">{{ __('Company Name') }}</th>
                                <th class="text-center">{{ __('Responsible Name') }}</th>
                                {{-- <th class="text-center">{{ __('Date') }}</th> --}}
                                <th class="text-center">{{ __('Jordan Governorate') }}</th>
                                <th class="text-center">{{ __('Order Way') }}</th>
                                <th class="text-center">{{ __('order-status') }}</th>
                                <th class="text-center">{{ __('Payment Method') }}</th>
                                <th class="text-center">{{ __('Order Type') }}</th>
                                <th class="text-center">{{ __('Driver') }}</th>
                                <th class="text-center">{{ __('Created at') }}</th>
                                <th class="text-center">{{ __('Control') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($orders as $key => $order)
                            <tr>

                                <td class="text-center">{{ ++$key }}</td>
                                <td class="text-center">{{ $order->sl_number }}</td>
                                <td class="text-center">{{ $order->user->company_name }}</td>
                                <td class="text-center">{{ $order->user->responsible_name }}</td>
                                {{-- <td class="text-center">{{ 'Date' }}</td> --}}
                                <td class="text-center">{{ $order->jordanGovernorate->{'name_' .
                                    \Illuminate\Support\Facades\App::getLocale()} ?? null }}</td>
                                <td class="text-center">{{ $order->deliveryWayAttributes() }}</td>
                                <td class="text-center"><span
                                        class="status @if ($order->status == '-1' || $order->status == '3') red @elseif($order->status == '0') yellow @else green @endif">{{
                                        $order->getStatusText() }}</span></td>
                                <td class="text-center">{{ $order->userPayStatusAttributes() }}</td>
                                <td class="text-center">{{ $order->orderType() }}</td>
                                <td class="text-center">{{ $order->driver->name ?? '-' }}</td>
                                <td class="text-center">{{ $order->created_at->diffForHumans() }}</td>
                                <td class="text-center">
                                    <div class="action-buttons">
                                        <a href="{{ route('admin.orders.show', ['id' => $order->id]) }}"
                                            class="btn-details"><i class="fa fa-fw fa-lg fa-eye"></i></a>
                                        @if ($order->status == 0)
                                        <form action="{{ route('admin.orders.accept', ['id' => $order->id]) }}"
                                            method="post" id="delete{{ $order->id }}" style="display: none"
                                            data-swal-title="{{ __('Accept Order') }}"
                                            data-swal-text="{{ __('Are You Sure To Accept This Order?') }}"
                                            data-yes="{{ __('Yes') }}" data-no="{{ __('No') }}"
                                            data-success-msg="{{ __('the Order has been accepted successfully') }}">
                                            @csrf</form>
                                        <span href="#" class="control-link remove form-confirm"
                                            data-form-id="#delete{{ $order->id }}"><i class="fa fa-fw fa-lg fa-check"
                                                style="color: green"></i></span>
                                        <form action="{{ route('admin.orders.reject', ['id' => $order->id]) }}"
                                            method="post" id="delete2{{ $order->id }}" style="display: none"
                                            data-swal-title="{{ __('Reject Order') }}"
                                            data-swal-text="{{ __('Are You Sure To Reject This Order?') }}"
                                            data-yes="{{ __('Yes') }}" data-no="{{ __('No') }}"
                                            data-success-msg="{{ __('the Order has been rejected successfully') }}">
                                            @csrf</form>
                                        <span href="#" class="control-link remove form-confirm"
                                            data-form-id="#delete2{{ $order->id }}"><i class="fa fa-fw fa-lg fa-times"
                                                style="color: red"></i></span>


                                        @endif
                                    </div>
                                </td>

                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<!-- Data table plugin-->
<script type="text/javascript" src="{{ asset('assets/js/plugins/jquery.dataTables.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/js/plugins/dataTables.bootstrap.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/js/plugins/select2.min.js') }}"></script>

<script type="text/javascript">
    $('#sampleTable').DataTable({
            "pageLength": 10,
            "order": [
                [0, "asc"] // Order by the first column in ascending order
            ],
            "columnDefs": [{
                    "orderSequence": ["asc"],
                    "targets": [0]
                } // Set order sequence for the first column
            ]
        });
        $('.js-basic-single-select2').select2();
</script>

<script>
    $("#FilterButton").on("click", function() {
            let url = $(this).data("url"),
                activation = $("#Activation").val(),
                status = $("#Status").val(),
                deliverWay = $("#deliver_way").val(),
                day = $("#day").val()
            url = status ? `${url}/${status}` : url;
            url = deliverWay ? `${url}?deliverWay=${deliverWay}` : url;
            url = day ? `${url}&&day=${day}` : url;
            url = activation ? `${url}?active=${activation}` : url;
            window.location = url
        });

        function toggleDaySection() {
        var deliverWay = $('#deliver_way').val();

        if (deliverWay === '0') {
            $('#day').closest('.form-group').show();
        } else {
            $('#day').closest('.form-group').hide(); 
        }
    }

    toggleDaySection();

    $('#deliver_way').on('change', function() {
        toggleDaySection();
    });

</script>
<script type="text/javascript">
    $(".download-excel").click(function(e) {
            e.preventDefault();

            let status = $("#status-filter option:selected").data("value");


            $(this).siblings("input[name='status']").val(status);


            $("#form-excel").submit();

        });
</script>
@endsection