@extends('web.layouts.base')

@section('titre')
    Mes Commandes
@endsection

@section('styles')
    <link rel="stylesheet" media="screen, print" href="{{ asset('dt/css/datagrid/datatables/datatables.bundle.css') }}">
    {{-- <link id="myskin" rel="stylesheet" media="screen, print" href="{{ asset('dt/css/skins/skin-master.css') }}">
    <link rel="stylesheet" media="screen, print" href="{{ asset('dt/css/fa-solid.css') }}">

    <script src="{{ asset('assets/js/js/jquery.min.js') }}"></script>
    <script src="{{ asset('assets/js/js/umd/popper.min.js') }}"></script>
    <script src="{{ asset('assets/js/js/bootstrap.min.js') }}"></script>
    <script src="{{ asset('assets/js/js/bootstrap.bundle.min.js') }}"></script> --}}
@endsection

@section('content')
    <div class="page-content">
        <div class="container-fluid">

            <!-- start page title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                        <h4 class="mb-sm-0">Commandes</h4>

                        <div class="page-title-right">
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item"><a href="{{ route('home') }}">Dashboard</a></li>
                                <li class="breadcrumb-item active">Mes Commandes</li>
                            </ol>
                        </div>

                    </div>
                </div>
            </div>
            <!-- end page title -->

            <div class="row">
                <div class="col-lg-12">
                    <div class="card" id="orderList">
                        <div class="card-header border-0">
                            <div class="row align-items-center gy-3">
                                <div class="col-sm">
                                    <h5 class="card-title mb-0">Historique de commande</h5>
                                </div>
                                <div class="col-sm-auto">
                                    {{--<div class="d-flex gap-1 flex-wrap">
                                        <button type="button" class="btn btn-primary add-btn" data-bs-toggle="modal" id="create-btn" data-bs-target="#showModal"><i class="ri-add-line align-bottom me-1"></i> Create Order</button>
                                        <button type="button" class="btn btn-info"><i class="ri-file-download-line align-bottom me-1"></i> Import</button>
                                        <button class="btn btn-soft-danger" id="remove-actions" onclick="deleteMultiple()"><i class="ri-delete-bin-2-line"></i></button>
                                    </div>--}}
                                </div>
                            </div>
                        </div>
                        <div class="card-body border border-dashed border-end-0 border-start-0">
                            <form>
                                {{--<div class="row g-3">
                                    <div class="col-xxl-5 col-sm-6">
                                        <div class="search-box">
                                            <input type="text" class="form-control search" placeholder="Search for order ID, customer, order status or something...">
                                            <i class="ri-search-line search-icon"></i>
                                        </div>
                                    </div>
                                    <!--end col-->
                                    <div class="col-xxl-2 col-sm-6">
                                        <div>
                                            <input type="text" class="form-control" data-provider="flatpickr" data-date-format="d M, Y" data-range-date="true" id="demo-datepicker" placeholder="Select date">
                                        </div>
                                    </div>
                                    <!--end col-->
                                    <div class="col-xxl-2 col-sm-4">
                                        <div>
                                            <select class="form-control" data-choices="" data-choices-search-false="" name="choices-single-default" id="idStatus">
                                                <option value="">Status</option>
                                                <option value="all" selected="">All</option>
                                                <option value="Pending">Pending</option>
                                                <option value="Inprogress">Inprogress</option>
                                                <option value="Cancelled">Cancelled</option>
                                                <option value="Pickups">Pickups</option>
                                                <option value="Returns">Returns</option>
                                                <option value="Delivered">Delivered</option>
                                            </select>
                                        </div>
                                    </div>
                                    <!--end col-->
                                    <div class="col-xxl-2 col-sm-4">
                                        <div>
                                            <select class="form-control" data-choices="" data-choices-search-false="" name="choices-single-default" id="idPayment">
                                                <option value="">Select Payment</option>
                                                <option value="all" selected="">All</option>
                                                <option value="Mastercard">Mastercard</option>
                                                <option value="Paypal">Paypal</option>
                                                <option value="Visa">Visa</option>
                                                <option value="COD">COD</option>
                                            </select>
                                        </div>
                                    </div>
                                    <!--end col-->
                                    <div class="col-xxl-1 col-sm-4">
                                        <div>
                                            <button type="button" class="btn btn-primary w-100" onclick="SearchData();"> <i class="ri-equalizer-fill me-1 align-bottom"></i>
                                                Filters
                                            </button>
                                        </div>
                                    </div>
                                    <!--end col-->
                                </div>--}}
                                <!--end row-->
                            </form>
                        </div>
                        <div class="card-body pt-0">
                            <div>
                                <ul class="nav nav-tabs nav-tabs-custom nav-primary mb-3" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active All py-3" data-bs-toggle="tab" id="All" href="#home1" role="tab" aria-selected="true">
                                            <i class="ri-store-2-fill me-1 align-bottom"></i> Toutes les commandes
                                        </a>
                                    </li>
                                    {{--<li class="nav-item">
                                        <a class="nav-link py-3 Delivered" data-bs-toggle="tab" id="Delivered" href="#delivered" role="tab" aria-selected="false">
                                            <i class="ri-checkbox-circle-line me-1 align-bottom"></i> Statut
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link py-3 Pickups" data-bs-toggle="tab" id="Pickups" href="#pickups" role="tab" aria-selected="false">
                                            <i class="ri-truck-line me-1 align-bottom"></i> Pickups <span class="badge bg-danger align-middle ms-1">2</span>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link py-3 Returns" data-bs-toggle="tab" id="Returns" href="#returns" role="tab" aria-selected="false">
                                            <i class="ri-arrow-left-right-fill me-1 align-bottom"></i> Returns
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link py-3 Cancelled" data-bs-toggle="tab" id="Cancelled" href="#cancelled" role="tab" aria-selected="false">
                                            <i class="ri-close-circle-line me-1 align-bottom"></i> Cancelled
                                        </a>
                                    </li>--}}
                                </ul>

                                <div class="table-responsive table-card mb-1">
                                    <table class="table table-nowrap align-middle" id="orderTable">
                                        <thead class="text-muted table-light">
                                        <tr class="text-uppercase">
                                            {{--<th scope="col" style="width: 25px;">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" id="checkAll" value="option">
                                                </div>
                                            </th>--}}
                                            <th class="sort" data-sort="id">Commande ID</th>
                                            @if (auth()->user()->id == '8')
                                                <th class="sort" data-sort="customer_name">Client</th>
                                            @endif
{{--                                            <th class="sort" data-sort="product_name">Produits</th>--}}
                                            <th class="sort" data-sort="date">Date</th>
                                            <th class="sort" data-sort="amount">Montant</th>
{{--                                            <th class="sort" data-sort="payment">Payment Method</th>--}}
                                            <th class="sort" data-sort="status">Etat</th>
                                            <th class="sort" data-sort="city">Action</th>
                                        </tr>
                                        </thead>
                                        <tbody class="list form-check-all">
                                        @foreach($datas as $key => $item)
                                        <tr>
                                            {{--<th scope="row">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" name="checkAll" value="option1">
                                                </div>
                                            </th>--}}
                                            <td class="id"><a href="{{ route('achats.show',$item->id) }}" class="fw-medium link-primary">#VZ2101</a></td>
                                            @if (auth()->user()->id == '8')
                                            <td class="customer_name">{{ $item->user->nom.' '.$item->user->postnom.' '.$item->user->prenom }}</td>
                                            @endif
{{--                                            <td class="product_name">{{ $ }}</td>--}}
                                            <td class="date">{{ date('d-m-Y',strtotime($item->datecreate)) }}, <small class="text-muted">{{ $item->created_at->format('H:m') }}</small></td>
                                            <td class="amount">{{ ($item->amount)}} $</td>
{{--                                            <td class="payment">Mastercard</td>--}}
                                            <td class="status"><span class="badge badge-soft-warning text-uppercase">{{ $item->statut == '0' ? 'En attente' : 'Expedié' }}</span>
                                            </td>
                                            <td>
                                                <ul class="list-inline hstack gap-2 mb-0">
                                                    <li class="list-inline-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="View">
                                                        <a href="{{ route('achats.show',$item->id) }}" target="_blank" class="text-primary d-inline-block">
                                                            <i class="ri-eye-fill fs-16"></i>
                                                        </a>
                                                    </li>
                                                    @if (auth()->user()->id == '8')
                                                    <li class="list-inline-item edit" onclick="handleEdit({{ $item->id }})" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Modifier">
                                                        <a href="#"  class="text-primary d-inline-block edit-item-btn">
                                                            <i class="ri-pencil-fill fs-16"></i>
                                                        </a>
                                                    </li>
                                                    @endif
                                                    {{--<li class="list-inline-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Remove">
                                                        <a class="text-danger d-inline-block remove-item-btn" data-bs-toggle="modal" href="#deleteOrder">
                                                            <i class="ri-delete-bin-5-fill fs-16"></i>
                                                        </a>
                                                    </li>--}}
                                                </ul>
                                            </td>
                                        </tr>
                                        @endforeach
                                        </tbody>
                                    </table>
                                    <div class="noresult" style="display: none">
                                        <div class="text-center">
                                            <lord-icon src="../../../msoeawqm.json" trigger="loop" colors="primary:#405189,secondary:#0ab39c" style="width:75px;height:75px"></lord-icon>
                                            <h5 class="mt-2">Desolé! Aucune commande trouvé</h5>
                                            <p class="text-muted">We've searched more than 150+ Commandes We did not find any orders for you search.</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="d-flex justify-content-end">
                                    <div class="pagination-wrap hstack gap-2">
                                        <a class="page-item pagination-prev disabled" href="#">
                                            Previous
                                        </a>
                                        <ul class="pagination listjs-pagination mb-0"></ul>
                                        <a class="page-item pagination-next" href="#">
                                            Next
                                        </a>
                                    </div>
                                </div>
                            </div>

                            <div class="modal fade" id="showModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered">
                                    <div class="modal-content">
                                        <div class="modal-header bg-primary p-3">
                                            <h5 class="modal-title" id="exampleModalLabel">&nbsp;Changer de Statut</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="close-modal"></button>
                                        </div>
                                        <form action="" class="tablelist-form update-form" id="editUserForm" autocomplete="off">
                                            @csrf
                                            @method('PUT')
                                            <div class="modal-body">
                                                {{--<input type="hidden" id="id-field">

                                                <div class="mb-3" id="modal-id">
                                                    <label for="orderId" class="form-label">ID</label>
                                                    <input type="text" id="orderId" class="form-control" placeholder="ID" readonly="">
                                                </div>

                                                <div class="mb-3">
                                                    <label for="customername-field" class="form-label">Customer Name</label>
                                                    <input type="text" id="customername-field" class="form-control" placeholder="Enter name" required="">
                                                </div>

                                                <div class="mb-3">
                                                    <label for="productname-field" class="form-label">Product</label>
                                                    <select class="form-control" data-trigger="" name="productname-field" id="productname-field" required=""></select>
                                                    <option value="">Product</option>
                                                    <option value="Puma Tshirt">Puma Tshirt</option>
                                                    <option value="Adidas Sneakers">Adidas Sneakers</option>
                                                    <option value="350 ml Glass Grocery Container">350 ml Glass Grocery Container</option>
                                                    <option value="American egale outfitters Shirt">American egale outfitters Shirt</option>
                                                    <option value="Galaxy Watch4">Galaxy Watch4</option>
                                                    <option value="Apple iPhone 12">Apple iPhone 12</option>
                                                    <option value="Funky Prints T-shirt">Funky Prints T-shirt</option>
                                                    <option value="USB Flash Drive Personalized with 3D Print">USB Flash Drive Personalized with 3D Print</option>
                                                    <option value="Oxford Button-Down Shirt">Oxford Button-Down Shirt</option>
                                                    <option value="Classic Short Sleeve Shirt">Classic Short Sleeve Shirt</option>
                                                    <option value="Half Sleeve T-Shirts (Blue)">Half Sleeve T-Shirts (Blue)</option>
                                                    <option value="Noise Evolve Smartwatch">Noise Evolve Smartwatch</option>

                                                </div>

                                                <div class="mb-3">
                                                    <label for="date-field" class="form-label">Order Date</label>
                                                    <input type="date" id="date-field" class="form-control" data-provider="flatpickr" required="" data-date-format="d M, Y" data-enable-time="" required="" placeholder="Select date">
                                                </div>

                                                <div class="row gy-4 mb-3">
                                                    <div class="col-md-6">
                                                        <div>
                                                            <label for="amount-field" class="form-label">Amount</label>
                                                            <input type="text" id="amount-field" class="form-control" placeholder="Total amount" required="">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div>
                                                            <label for="payment-field" class="form-label">Payment Method</label>
                                                            <select class="form-control" data-trigger="" name="payment-method" required="" id="payment-field">
                                                                <option value="">Payment Method</option>
                                                                <option value="Mastercard">Mastercard</option>
                                                                <option value="Visa">Visa</option>
                                                                <option value="COD">COD</option>
                                                                <option value="Paypal">Paypal</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>--}}

                                                <div>
                                                    <label for="delivered-status" class="form-label">Statut</label>
                                                    <select class="form-control" data-trigger="" name="statut" required="" id="delivered-status">
                                                        <option disabled value="">Changer de statut</option>
                                                        <option value="0">En Attente</option>
                                                        <option value="1">Livré</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <div class="hstack gap-2 justify-content-end">
                                                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Annuler</button>
                                                    <button type="submit" class="btn btn-success" id="submitEdit">Valider</button>
                                                    <!-- <button type="button" class="btn btn-success" id="edit-btn">Update</button> -->
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>

                            <!-- Modal -->
                            <div class="modal fade flip" id="deleteOrder" tabindex="-1" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered">
                                    <div class="modal-content">
                                        <div class="modal-body p-5 text-center">
                                            <lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop" colors="primary:#405189,secondary:#f06548" style="width:90px;height:90px"></lord-icon>
                                            <div class="mt-4 text-center">
                                                <h4>You are about to delete a order ?</h4>
                                                <p class="text-muted fs-15 mb-4">Deleting your order will remove all of your information from our database.</p>
                                                <div class="hstack gap-2 justify-content-center remove">
                                                    <button class="btn btn-link link-success fw-medium text-decoration-none" id="deleteRecord-close" data-bs-dismiss="modal"><i class="ri-close-line me-1 align-middle"></i> Close</button>
                                                    <button class="btn btn-danger" id="delete-record">Yes, Delete It</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--end modal -->
                        </div>
                    </div>

                </div>
                <!--end col-->
            </div>
            <!--end row-->

        </div>
        <!-- container-fluid -->
    </div>
    <!-- End Page-content -->
@endsection

@section('scripts')
    {{-- <script src="{{ asset('assets/js/app.js') }}"></script> --}}

    <script>
        $(document).ready(function() {
            //Update form
            $('.update-form').on('submit', function(e) {
                e.preventDefault();
                $("#submitEdit").prop('disabled', true)

                var spinner =
                    'En cours &nbsp;<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>\n' +
                    '          <span class="sr-only">Loading...</span>'

                var formObj = $(this);
                var url = formObj.attr('action');

                $.each(formObj.find('input', 'select'), function(key, field) {
                    var element = $('[name="' + field.name + '"]');
                    element.removeClass('is-invalid');
                    element.siblings('p.error').remove();
                });

                $("#submitEdit").html(spinner);
                var formData = new FormData(formObj[0]);

                $.ajax({
                    url: url,
                    dataType: 'JSON',
                    type: 'POST',
                    cache: false,
                    data: formData,
                    processData: false,
                    contentType: false,
                    mimeType: 'multipart/form-data',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    beforeSend: function() {
                        formData.append('_token', $('meta[name="csrf-token"]').attr('content'))
                    }
                })
                    .done(function(data) {
                        //console.log('DONE :: ', data);
                        if (data.redirect) {
                            window.location.href = data.redirect
                        }
                    })
                    .fail((jqXHR, options, error) => {
                        $("#submitEdit").text("Valider");
                        $("#submitEdit").prop('disabled', false);
                        // console.log('FAIL :: ', jqXHR)
                        if (!jqXHR.responseJSON) {
                            return;
                        }
                        status = jqXHR.responseJSON.status;
                        error = jqXHR.responseJSON.error;

                        $.each(error, function(key, val) {
                            var element = $('[name="' + key + '"]', formObj);

                            //console.log('ELEMENT :: ', element);
                            element.addClass('is-invalid');
                            if ($.isArray(val)) {
                                val.forEach((data) => {
                                    element.parent().append(
                                        `<p class="error text-danger">${data}</p>`);
                                })
                            } else {
                                element.parent().append(
                                    `<p class="error text-danger">${data}</p>`);
                            }
                        });
                    });
            });
            //endstore
        });

        function handleEdit(id) {
            var form = document.getElementById('editUserForm')
            form.action = '/backend/commandes/' + id;
            var token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

            $.ajax({
                headers: {
                    "Content-Type": "application/json",
                    "Accept": "application/json, text-plain, *!/!*",
                    "x-Requested-With": "XMLHttpRequest",
                    "x-CSRF-TOKEN": token
                },
                type: "GET",
                url: "/backend/commandes/" + id,
                method: "GET",
                success: function(data) {
                    $('#delivered-status').val(
                        data.statut
                    );
                }
            });

            $('#showModal').modal('show')
        }
    </script>
@endsection