@extends('layouts.tenant.master')
@section('title', 'Order Menu')

@section('css')
<link rel="stylesheet" type="text/css" href="{{ dynamic_url('assets/main/css/datatable-extension.css') }}">
@endsection

@section('style')
<style>
    .search_input {
        width: 40%;
        float: right;
        clear: both;
        margin: 10px 8px 10px 0;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    }
</style>
@endsection

@section('breadcrumb-title')
    <h2>Orders <span>List </span></h2>
@endsection

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

@section('content')

    <div class="p-2 mt-0 card-header no-border">
        {{-- <h5>Best Selling Product</h5> --}}
        {{-- <a href="{{ route('tenant_order_create') }}" class="text-white btn btn-info btn-sm" data-toggle="tooltip"
            title="Create a new order in the system">
            <i class="icofont icofont-plus"></i> Create Order
        </a>

        <a href="{{ route('tenant_deleted_order_list') }}" class="btn btn-success btn-sm" data-toggle="tooltip" title="Restore a previously deleted user">
            <i class="icofont icofont-spinner-alt-3"></i> Restore Order
        </a>
        <a href="{{ url()->current() }}" class="btn btn-light btn-sm" data-toggle="tooltip" title="Refresh this Page.">
            <i class="icofont icofont-refresh fa fa-spin"></i>&nbsp; Refresh
        </a> --}}
        <div class="pull-right" style="margin-bottom: 3px;">
            <button class="btn btn-dark btn-sm"> Deleted Orders </button>

            <button class="btn btn-primary btn-sm"> Download All Orders CSV </button>

            <select name="user_type" id="user_type" class="btn btn-info" style="color: white; padding: 4px !important;">
                <option value="">All User</option>
                <option value="representatives">Representatives</option>
                <option value="distributors">Distributors</option>
                <option value="dealers">Dealers</option>
                <option value="showrooms">Showrooms</option>
            </select>
            
        </div>
    </div>

    <input type="text" class="form-control w-40 search_input" name="" value="" placeholder="search keyword...">

    <table id="example1" class="table p-0 m-0 display table-striped table-bordered dataTable" cellspacing="0" width="100%"
        aria-describedby="example1_info" style="width: 100%;">
        <thead>
            <tr role="row">
                <th class="sorting_desc" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1"
                    colspan="1" aria-sort="descending" aria-label="Order ID: activate to sort column ascending"
                    style="width: 37.7778px;">Order ID</th>
                <th class="sorting" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1"
                    colspan="1" aria-label="Customer Name: activate to sort column ascending" style="width: 77.7778px;">
                    Customer Name</th>
                <th class="sorting" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1"
                    colspan="1" aria-label="Customer Type: activate to sort column ascending" style="width: 84.7778px;">
                    Customer Type</th>
                <th class="sorting" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1"
                    colspan="1" aria-label="Customer Email: activate to sort column ascending" style="width: 96.7778px;">
                    Customer Email</th>
                <th class="sorting" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1"
                    colspan="1" aria-label="Job Name: activate to sort column ascending" style="width: 46.7778px;">
                    Job Name</th>
                <th class="sorting" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1"
                    colspan="1" aria-label="Company Name: activate to sort column ascending" style="width: 53.7778px;">
                    Company Name</th>
                <th class="sorting" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1"
                    colspan="1" aria-label="Order Weight: activate to sort column ascending" style="width: 126.778px;">
                    Order Weight</th>
                <th class="sorting" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1"
                    colspan="1" aria-label="Order Amount: activate to sort column ascending" style="width: 126.778px;">
                    Order Amount</th>
                <th class="sorting" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1"
                    colspan="1" aria-label="Order Status: activate to sort column ascending" style="width: 126.778px;">
                    Order Status</th>
                <th class="sorting" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1"
                    colspan="1" aria-label="Transaction ID: activate to sort column ascending" style="width: 126.778px;">
                    Transaction ID</th>
                <th class="sorting" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1"
                colspan="1" aria-label="Order Date: activate to sort column ascending" style="width: 126.778px;">
                Order Date</th>
                <th class="sorting" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1"
                    colspan="1" aria-label="Action: activate to sort column ascending" style="width: 250px;">
                    Action</th>
            </tr>
        </thead>

        <tbody role="alert" aria-live="polite" aria-relevant="all">
            @if(!isset($orders))
                <tr>
                    <td colspan="12">No stock check requests found.</td>
                </tr>
            @else
                @foreach($orders as $order)
                    <tr>
                        <td>{{ $order->id }}</td>
                        <td>{{ $order->user->name ?? 'N/A' }}</td>
                        <td>{{ $order->user->parent_id ?? 'N/A' }}</td>
                        <td>{{ $order->user->email ?? 'N/A' }}</td>
                        <td>{{ $order->job_name ?? 'N/A' }}</td>
                        <td>{{ $order->user->company_name ?? 'N/A' }}</td>
                        <td>{{ $order->sub_total_weight ?? 'N/A' }}</td>
                        <td>{{ $order->grand_total_cost ?? 'N/A' }}</td>
                        <td>
                            <select id="order_status" name="order_status" class="btn cls_green" style="background-color: green;">
                                <option value="PROCESSING_{{$order->id}}" {{$order->shippping_status == 'PROCESSING' ? 'selected' : ''}}>PROCESSING</option>
                                <option value="PAID_{{$order->id}}" {{$order->shippping_status == 'PAID' ? 'selected' : ''}}>PAID</option>
                                <option value="PENDING_{{$order->id}}" {{$order->shippping_status == 'PENDING' ? 'selected' : ''}}>PENDING</option>
                                <option value="CANCELLED_{{$order->id}}" {{$order->shippping_status == 'CANCELLED' ? 'selected' : ''}}>CANCELLED</option>
                                <option value="COMPLETED_{{$order->id}}" {{$order->shippping_status == 'COMPLETED' ? 'selected' : ''}}>COMPLETED</option>
                            </select>
                        </td>
                        <td>{{ $order->transaction_id ?? 'N/A' }}</td>
                        <td>{{ $order->updated_at ? \Carbon\Carbon::parse($order->updated_at)->format('M d, Y') : 'N/A' }}</td>
                        <td>
                            <a href="{{route('tenant_order_show', ['id' => $order->id])}}">View</a> ||
                            <a href="{{route('tenant_warehouse_pick_list', ['id' => $order->id])}}">Pick List</a> ||
                            <a href="#">Send-QB</a> || 
                            <a href="#">Print</a> ||
                            <a href="{{route('tenant_order_destroy', ['id' => $order->id])}}">Delete</a>
                        </td>
                    </tr>
                @endforeach
            @endif
        </tbody>
    </table>
@endsection

@section('script')





<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="{{ dynamic_url('assets/main/js/datatable/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ dynamic_url('assets/main/js/datatable/datatable-extension/dataTables.buttons.min.js') }}"></script>
<script src="{{ dynamic_url('assets/main/js/datatable/datatable-extension/jszip.min.js') }}"></script>
<script src="{{ dynamic_url('assets/main/js/datatable/datatable-extension/buttons.colVis.min.js') }}"></script>
<script src="{{ dynamic_url('assets/main/js/datatable/datatable-extension/pdfmake.min.js') }}"></script>
<script src="{{ dynamic_url('assets/main/js/datatable/datatable-extension/vfs_fonts.js') }}"></script>


    <script>
        $(document).ready(function() {
            // Load Data
            function loadCatalogs() {
                $.ajax({
                    url: "{{ route('tenant_order_list') }}",
                    method: "GET",
                    success: function(data) {
                        let rows = '';
                        data.product_catalogs.forEach((catalog, index) => {
                            rows += `
                            <tr>
                                <td>${index + 1}</td>
                                <td>${catalog.name}</td>
                                <td>${catalog.image ?? 'N/A'}</td>
                                <td>${catalog.pdf ?? 'N/A'}</td>
                                <td>
                                    <select class="form-select status-dropdown" data-id="${catalog.id}">
                                        <option value="1" ${catalog.status == 1 ? 'selected' : ''}>Visible</option>
                                        <option value="0" ${catalog.status == 0 ? 'selected' : ''}>Not-Visible</option>
                                    </select>
                                </td>
                                <td>
                                    <button class="btn btn-sm btn-warning editCatalog" data-id="${catalog.id}">Edit</button>
                                    <button class="btn btn-sm btn-danger deleteCatalog" data-id="${catalog.id}">Delete</button>
                                </td>
                            </tr>
                        `;
                        });
                        $('#catalogTable tbody').html(rows);
                    }
                });
            }

            loadCatalogs();

            // Handle Create/Edit
            $('#createCatalog').click(function() {
                $('#catalogModalLabel').text('Create Catalog');
                $('#catalogForm')[0].reset();
                $('#catalogId').val('');
                $('#catalogModal').modal('show');
            });

            $('#catalogForm').submit(function(e) {
                e.preventDefault();
                let formData = new FormData(this);
                let id = $('#catalogId').val();
                let url = id ? `/product_catalogs/${id}` : "{{ route('product_catalogs.store') }}";
                let method = id ? 'PUT' : 'POST';

                $.ajax({
                    url: url,
                    method: method,
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        $('#catalogModal').modal('hide');
                        loadCatalogs();
                    }
                });
            });

            // Handle Delete
            $(document).on('click', '.deleteCatalog', function() {
                let id = $(this).data('id');
                if (confirm('Are you sure?')) {
                    $.ajax({
                        url: `/product_catalogs/${id}`,
                        method: 'DELETE',
                        success: function() {
                            loadCatalogs();
                        }
                    });
                }
            });

            // Handle Status Change
            $(document).on('change', '.status-dropdown', function() {
                let id = $(this).data('id');
                let status = $(this).val();

                $.ajax({
                    url: `/product_catalogs/${id}`,
                    method: 'PUT',
                    data: {
                        status
                    },
                    success: function() {
                        loadCatalogs();
                    }
                });
            });
        });
    </script>

@endsection