@extends('administrator.layout')
@section('admintitle', 'Order List')
@section('content')

<style>
    img, svg {
        vertical-align: middle;
        width: 18px;
    }
</style>
<div class="container-fluid pt-4 px-4">
    <div class="row g-4">
        <div class="col-12">
            <div class="bg-light rounded h-100 p-4">
            
                        
                            @if ($errors->any())
                                <div class="alert alert-danger alert-dismissible fade show mb-2" role="alert">
                                    @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
                                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                </div>
                            @endif

<form class="row" action="{{ route('admin_search_orders') }}" method="GET">
   
    <div class="col-md-3">
        <input type="text" name="name" value="{{ request()->query('name') }}" class="form-control" placeholder="{{ __('text.name') }}">
    </div>
    <div class="col-md-3">
        <input type="date"  name="date_added" value="{{ request()->query('date_added') }}" class="form-control" placeholder="{{ __('text.date') }}">
    </div>
    <div class="col-md-3">
        <input type="text" name="order_id" value="{{ request()->query('order_id') }}" class="form-control" placeholder="{{ __('text.order') }} {{ __('text.id') }}">
    </div>
    <div class="col-md-3">
        <input type="submit" name="search" class="btn btn-primary" value="Search">
    </div>
</form>

            </div>
        </div>
    </div>
</div>

<div class="container">
    <div class="container-fluid pt-4 px-4">
        <div class="row g-4">
            <div class="col-12">
                <div class="bg-light rounded h-100 p-4">
                    @if(session('success'))
                        <div class="alert alert-success alert-dismissible fade show mb-2" role="alert">
                            <i class="fa fa-exclamation-circle me-2"></i><strong>{{ __('text.success') }}!</strong>  {{ session('success') }}.
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif

                    @if (session()->has('error'))
                        <div class="alert alert-danger alert-dismissible fade show mb-2" role="alert">
                            <i class="fa fa-exclamation-circle me-2"></i><strong>{{ __('text.error') }}!</strong> {{ session()->get('error') }}.
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif

                   
                    
<div class="row">
    <div id="deleteSuccessMessage" class="alert alert-success d-none" role="alert">
        {{ __('text.success_msg') }}.
    </div>
    <div class="d-flex justify-content-between align-items-center mb-2">
        <h2>Order List</h2>

        @csrf
        <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#confirmModal">{{ __('text.delete') }}</button>
    </div>
    <table class="table">
        <thead>
            <tr>
                <th><input type="checkbox" id="selectAll"></th>
                <th>Sno.</th>
                <th>{{ __('text.name') }}</th>
                <th>{{ __('text.phone') }}</th>
                <th>{{ __('text.price') }}</th>
                <th>{{ __('text.sub_total') }}</th>
                <th>{{ __('text.order_date') }}</th>
                <th>{{ __('text.status') }}</th>
                <th>{{ __('text.action') }}</th>
            </tr>
        </thead>
        <tbody>
            @if(isset($searchData))
                @foreach ($searchData as $item)
                    <tr>
                        <td><input type="checkbox" name="order_ids[]" value="{{ $item->order_id }}"></td>
                        <td>{{ $item->order_id }}</td>
                        <td>{{ $item->first_name }} {{ $item->last_name }}</td>
                        <td>{{ $item->telephone }}</td>
                        <td class="price">{{ $symbol }}{{ $item->price }}</td>
                        <td class="sub_total">{{ $symbol }}{{ $item->price * $item->quantity }}</td>
                        <td>{{ $item->date_added }}</td>
                        <td>
                            @if($item->status == 0)
                                <span style="color: red;">{{ __('text.pending') }}</span>
                            @elseif($item->status == 1)
                                <span style="color: green;">{{ __('text.complete') }}</span>
                            @endif
                        </td>
                        <td>
                            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#productModal{{ $item->order_id }}">
                                {{ __('text.views') }}
                            </button>
                            @if($item->status == 0)
                                <form method="POST" action="{{ route('admin_order_complete', ['id' => $item->order_id]) }}" style="display: inline;">
                                    @csrf
                                    <button type="submit" class="btn btn-warning">{{ __('text.complete') }}</button>
                                </form>
                            @endif
                        </td>
                    </tr>
                @endforeach
            @endif
            @if(isset($products))
                @foreach ($products as $item)
                    <tr>
                        <td><input type="checkbox" name="order_ids[]" value="{{ $item->order_id }}"></td>
                        <td>{{ $item->order_id }}</td>
                        <td>{{ $item->first_name }} {{ $item->last_name }}</td>
                        <td>{{ $item->telephone }}</td>
                        <td class="price">{{ $symbol }}{{ $item->price }}</td>
                        <td class="sub_total">{{ $symbol }}{{ $item->price * $item->quantity }}</td>
                        <td>{{ $item->date_added }}</td>
                        <td>
                            @if($item->status == 0)
                                <span style="color: red;">{{ __('text.pending') }}</span>
                            @elseif($item->status == 1)
                                <span style="color: green;">{{ __('text.complete') }}</span>
                            @endif
                        </td>
                        <td>
                            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#productModal{{ $item->order_id }}">
                                {{ __('text.views') }}
                            </button>
                            @if($item->status == 0)
                                <form method="POST" action="{{ route('admin_order_complete', ['id' => $item->order_id]) }}" style="display: inline;">
                                    @csrf
                                    <button type="submit" class="btn btn-warning">{{ __('text.complete') }}</button>
                                </form>
                            @endif
                        </td>
                    </tr>
                @endforeach
            @endif
        </tbody>
        <tfoot>
            <tr>
                <td colspan="9">
                    <div class="d-flex showing-page">
                        @if(isset($searchData))
                           {{ $searchData->appends(['name' => $name ?? '', 'date_added' => $date ?? '', 'order_id' => $order_id ?? ''])->links() }}
                        @elseif(isset($products))
                            {{ $products->links() }}
                        @endif
                    </div>
                </td>
            </tr>
        </tfoot>
    </table>
</div>

<!-- Confirmation Modal -->
<div class="modal fade" id="confirmModal" tabindex="-1" aria-labelledby="confirmModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                 <h5 class="modal-title" id="confirmModalLabel">{{ __('text.confirms') }} {{ __('text.delete') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
               {{ __('text.confirm') }}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('text.cancel') }}</button>
                <button type="button" class="btn btn-danger" id="confirmDeleteButton">{{ __('text.delete') }}</button>
            </div>
            </div>
        </div>
    </div>
</div>

                    <script>
                        document.getElementById('selectAll').addEventListener('click', function(e) {
                            var checkboxes = document.querySelectorAll('input[type="checkbox"]');
                            for (var checkbox of checkboxes) {
                                checkbox.checked = this.checked;
                            }
                        });

                        document.getElementById('confirmDeleteButton').addEventListener('click', function(e) {
                            document.getElementById('deleteForm').submit();
                        });
                    </script>
                    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    $(document).ready(function() {
        $('#confirmDeleteButton').on('click', function() {
            var selectedOrders = [];
            $('input[name="order_ids[]"]:checked').each(function() {
                selectedOrders.push($(this).val());
            });

            if (selectedOrders.length > 0) {
                $.ajax({
                    url: '{{ route('admin_delete_orders') }}', // Replace with your route
                    type: 'POST',
                    data: {
                        order_ids: selectedOrders,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        console.log('Orders deleted successfully');

                        // Show success message
                        $('#deleteSuccessMessage').removeClass('d-none');

                        // Hide modal
                        $('#confirmModal').modal('hide');

                        // Reload page after 2 seconds
                        setTimeout(function() {
                            window.location.reload();
                        }, 2000);
                    },
                    error: function(xhr, status, error) {
                        console.error('Error deleting orders:', error);
                        alert('Error deleting orders');
                    }
                });
            } else {
                alert('Please select orders to delete');
            }
        });

        // Select/Deselect all checkboxes
        $('#selectAll').on('change', function() {
            $('input[name="order_ids[]"]').prop('checked', this.checked);
        });
    });
</script>



                </div>
            </div>
        </div>
    </div>

@endsection