@extends('layouts/contentLayoutMaster')

@section('title', 'Edit Order')

@section('vendor-style')
{{-- Page Css files --}}
<link rel="stylesheet" href="{{ asset(mix('admin/vendors/css/tables/datatable/dataTables.bootstrap4.min.css')) }}">
<link rel="stylesheet" href="{{ asset(mix('admin/vendors/css/tables/datatable/responsive.bootstrap4.min.css')) }}">
<link rel="stylesheet" href="{{ asset(mix('admin/vendors/css/tables/datatable/buttons.bootstrap4.min.css')) }}">
<link rel="stylesheet" href="{{ asset(mix('admin/vendors/css/extensions/toastr.min.css')) }}">
<link rel="stylesheet" href="{{ asset(mix('admin/vendors/css/forms/select/select2.min.css')) }}">
@endsection

@section('page-style')
{{-- Page Css files --}}
<link rel="stylesheet" href="{{ asset(mix('admin/css/base/plugins/forms/form-validation.css')) }}">
<link rel="stylesheet" href="{{ asset(mix('admin/css/base/pages/app-user.css')) }}">
<link rel="stylesheet" href="{{ asset(mix('admin/css/base/plugins/extensions/ext-component-toastr.css')) }}">
@endsection
<script>
    function showMessage(message, title, status) {
        setTimeout(function () {
            toastr[status](
                message,
                title, {
                    closeButton: true,
                    tapToDismiss: false
                }
            );
        }, 2000);
    }
</script>

@section('content')
@if(session()->has('success'))
<script>
    showMessage("{{session()->get('success')}}", 'Success', 'success');
</script>
@endif
@if(session()->has('error'))
<script>
    showMessage("{{session()->get('error')}}", 'Warning', 'warning');
</script>
@endif
<section>
    <div class="col-lg-12 col-12 p-0">
        <div class="card card-company-table">
            <div class="card-header pb-0">
                <h4 class="card-title">
                    Edit Order
                </h4>
                <a role="button" class="btn btn-secondary " href="{{ route('order-cancel') }}">
                    <i data-feather="corner-up-left" class="font-medium-2"></i>&nbsp;Back
                </a>
            </div>

            <div class="card-body">

                @if(isset($order) && $order != '[]' && $order != null)
                <label class="font-medium-1">Member:
                    {{ ucwords($order->first_name.' '.$order->last_name) }}
                </label>
                <div class="row">
                    <div class="col-12 col-lg-6 col-sm-6 mt-1">
                        <label class="font-medium-1"><span class="text-warning">*&nbsp;</span>Select Product:</label>
                        <select class="custom-select select2 @error('product') is-invalid @enderror" name="product_id"
                            required id="product_id">
                            <option value="">Select Product</option>
                            @if(isset($products) && $products != '[]' && $products != null)
                            @foreach($products as $product)
                            <option value="{{ $product->id }}">{{ ucwords($product->name) }}</option>
                            @endforeach
                            @else
                            <option>Product not found</option>
                            @endif
                        </select>
                        @error('product')
                        <div class="invalid-feedback">
                            {{ $message }}
                        </div>
                        @enderror
                    </div>
                    <div class=" col-12 col-lg-6 col-sm-6 mt-1">
                        <label class="font-medium-1"><span class="text-warning">*&nbsp;</span>Product Quantity:</label>
                        <input type="number" min="1" value="1" required name="quantity"
                            class="form-control @error('quantity') is-invalid @enderror" id="quantity">
                        @error('quantity')
                        <div class="invalid-feedback">
                            {{ $message }}
                        </div>
                        @enderror
                    </div>
                    <div class="col-12 col-lg-6 col-sm-6 mt-1">
                        <button class="mt-1 btn btn-primary" id="addToCart" onclick="preventDefault();"><i
                                data-feather='plus-square'></i>&nbsp;Add to Order List</button>
                    </div>
                </div>

                <div class="table-responsive mt-1 shadow-lg border border-primary border-1 card">
                    <div class="card-header">
                        <h4 class="card-title ">
                            Member Cart
                        </h4>
                    </div>
                    <div class="card-body">
                        <table class="table border border-lighten-1" id="dataTable">
                            <thead>
                                <tr>
                                    <th>NO</th>
                                    <th>Product Name</th>
                                    <th>Quantity</th>
                                    <th>Unit Price</th>
                                    <th>Total</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody id="#cart">
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="card shadow-lg border border-primary border-1 mt-1">
                    <div class="card-header">
                        <h4 class="card-title ">
                            Order Summary
                        </h4>
                    </div>
                    <div class="card-body">
                        <div class="font-medium-1 border border-bottom-1 border-top-0 border-right-0 border-left-0">Sub
                            Total: <span id="subTotal" class="float-right font-weight-bold"></span></div>
                        <div
                            class="font-medium-1 mt-1 border border-bottom-1 border-top-0 border-right-0 border-left-0">
                            Net Discount: <span id="netDiscount" class="float-right font-weight-bold"></span></div>
                        {{--                                <div class="font-medium-1 mt-1">Sales Tax: <span>Rs.0/=</span></div>--}}
                        {{--                                <div class="font-medium-1 mt-1">Shipping: <span>Rs.0/=</span></div>--}}
                        <div
                            class="font-medium-1 mt-1  border border-bottom-1 border-top-0 border-right-0 border-left-0">
                            Order Total: <span id="orderTotal" class="float-right font-weight-bold"></span></div>
                        <div class="font-medium-1 mt-1">
                            <label for="payment-status" class="font-medium-1">Payment Status:</label>
                            <select class="custom-select select2" id="payment" onclick="paymentStatus(this.value)"
                                required>
                                <option value="">Select Payment Status</option>
                                <option value="pending" @if($order->payment_status == 'pending') selected="selected"
                                    @endif>Pending</option>
                                <option value="success" @if($order->payment_status == 'success') selected ="selected"
                                    @endif>Success</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="card shadow-lg border border-primary border-1">
                    <div class="card-header pb-0">
                        <h4 class="card-title ">
                            Customer Shipping Details
                        </h4>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('order-edit') }}" method="POST" id="orderForm">
                            <input type="hidden" name="id" value="{{ $order->id }}" id="id">
                            <div class="row">
                                <div class="col-12 col-lg-6 col-sm-6 mt-1">
                                    <label for="customer-name" class="font-medium-1 pt-1"><span
                                            class="text-warning">*&nbsp;</span>Customer Name: </label>
                                    <input type="text" class="form-control @error('name') is-invalid @enderror"
                                        placeholder="Customer Name" id="customer-name" name="name" required="required"
                                        value="{{ ucwords($order->name) }}">
                                    @error('name')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                    @enderror
                                </div>
                                @csrf

                                <input type="hidden" id="payment_status" name="payment_status" required>
                                <input type="hidden" id="orderer" name="member" required>
                                <div class="col-12 col-lg-6 col-sm-6 mt-1">
                                    <label for="customer-tel" class="font-medium-1 pt-1"><span
                                            class="text-warning">*&nbsp;</span>Contact Number: </label>
                                    <input type="tel" class="form-control @error('contact_number') is-invalid @enderror"
                                        placeholder="Contact Number" id="customer-tel" name="contact_number" required
                                        value="{{ $order->contact_number }}">
                                    @error('contact_number')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                    @enderror
                                </div>

                                <div class="col-12 col-lg-6 col-sm-6 mt-1">
                                    <label for="customer-email" class="font-medium-1 pt-1"><span
                                            class="text-warning">*&nbsp;</span>Email Address: </label>
                                    <input type="email" class="form-control @error('email') is-invalid @enderror"
                                        placeholder="Email Address" id="customer-email" name="email" required
                                        value="{{ $order->email }}">
                                    @error('email')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                    @enderror
                                </div>


                                <div class="col-12 col-lg-6 col-sm-6 mt-1">
                                    <label for="address-no" class="font-medium-1 pt-1"><span
                                            class="text-warning">*&nbsp;</span>Home No: </label>
                                    <input type="text" class="form-control @error('home_no') is-invalid @enderror"
                                        placeholder="No" id="address-no" name="home_no" required
                                        value="{{ ucwords($order->home_no) }}">
                                    @error('home_no')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                    @enderror
                                </div>

                                <div class="col-12 col-lg-6 col-sm-6 mt-1">
                                    <label for="address-street" class="font-medium-1 pt-1"><span
                                            class="text-warning">*&nbsp;</span>Street: </label>
                                    <input type="text" class="form-control @error('street') is-invalid @enderror"
                                        placeholder="Street" id="address-street" name="street" required
                                        value="{{ ucwords($order->street) }}">
                                    @error('street')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                    @enderror
                                </div>

                                <div class="col-12 col-lg-6 col-sm-6 mt-1">
                                    <label for="address-city" class="font-medium-1 pt-1"><span
                                            class="text-warning">*&nbsp;</span>City: </label>
                                    <input type="text" class="form-control @error('city') is-invalid @enderror"
                                        placeholder="City" id="address-city" name="city" required
                                        value="{{ ucwords($order->city) }}">
                                    @error('city')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                    @enderror
                                </div>

                                <div class="col-12 col-lg-6 col-sm-6 mt-1">
                                    <label for="address-state" class="font-medium-1 pt-1"><span
                                            class="text-warning">*&nbsp;</span>State: </label>
                                    <input type="text" class="form-control @error('state') is-invalid @enderror"
                                        placeholder="State" id="address-state" name="state" required
                                        value="{{ ucwords($order->state) }}">
                                    @error('state')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                    @enderror
                                </div>

                                <div class="col-12 col-lg-6 col-sm-6 mt-1">
                                    <label for="address-postal-code" class="font-medium-1 pt-1"><span
                                            class="text-warning">*&nbsp;</span>Postal Code: </label>
                                    <input type="text" class="form-control @error('postal_code') is-invalid @enderror"
                                        placeholder="Postal Code" id="address-postal-code" name="postal_code" required
                                        value="{{ ucwords($order->postal_code) }}">
                                    @error('postal_code')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                    @enderror
                                </div>

                                <div class="col-12 col-lg-6 col-sm-6 mt-1">
                                    <label for="address-country" class="font-medium-1 pt-1"><span
                                            class="text-warning">*&nbsp;</span>Country: </label>
                                    <input type="text" class="form-control @error('country') is-invalid @enderror"
                                        placeholder="Country" id="address-country" name="country" required
                                        value="{{ ucwords($order->country) }}">
                                    @error('country')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                    @enderror
                                </div>

                                <div class="col-12 col-lg-6 col-sm-6 mt-1">
                                    <label for="description" class="font-medium-1">Description:</label>
                                    <textarea id="description" class="form-control" placeholder="Description" rows="3"
                                        name="description">{{ htmlspecialchars(ucwords($order->description)) }}</textarea>
                                </div>

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

                <div class="justify-content-between col-12 mt-2 p-0">
                    <button type="submit" class="btn btn-primary col-12 col-lg-3 col-sm-3 ">
                        <i data-feather="save" class="font-medium-2"></i>&nbsp;Save Changes
                    </button>
                </div>
                </form>
                @else
                <div class="alert alert-warning alert-dismissible fade show p-1 m-1 text-center" role="alert">
                    Order Can not Find...!
                </div>
                @endif

            </div>
        </div>
    </div>
</section>
@endsection
@section('vendor-script')
{{-- vendor files --}}
<script src="{{ asset(mix('admin/vendors/js/tables/datatable/jquery.dataTables.min.js')) }}"></script>
<script src="{{ asset(mix('admin/vendors/js/tables/datatable/datatables.bootstrap4.min.js')) }}"></script>
<script src="{{ asset(mix('admin/vendors/js/tables/datatable/dataTables.responsive.min.js')) }}"></script>
<script src="{{ asset(mix('admin/vendors/js/tables/datatable/responsive.bootstrap4.js')) }}"></script>
<script src="{{ asset(mix('admin/vendors/js/tables/datatable/datatables.checkboxes.min.js')) }}"></script>
<script src="{{ asset(mix('admin/vendors/js/tables/datatable/datatables.buttons.min.js')) }}"></script>
<script src="{{ asset(mix('admin/vendors/js/tables/datatable/buttons.bootstrap4.min.js')) }}"></script>
<script src="{{ asset(mix('admin/vendors/js/tables/datatable/jszip.min.js')) }}"></script>
<script src="{{ asset(mix('admin/vendors/js/tables/datatable/pdfmake.min.js')) }}"></script>
<script src="{{ asset(mix('admin/vendors/js/tables/datatable/vfs_fonts.js')) }}"></script>
<script src="{{ asset(mix('admin/vendors/js/tables/datatable/buttons.html5.min.js')) }}"></script>
<script src="{{ asset(mix('admin/vendors/js/tables/datatable/buttons.print.min.js')) }}"></script>
<script src="{{ asset(mix('admin/vendors/js/tables/datatable/dataTables.rowGroup.min.js')) }}"></script>
<script src="{{ asset(mix('admin/vendors/js/pickers/flatpickr/flatpickr.min.js')) }}"></script>
<script src="{{ asset('admin/js/sweetalert/sweetalert.all.min.js') }}"></script>
<script src="{{ asset(mix('admin/vendors/js/extensions/toastr.min.js')) }}"></script>
<script src="{{ asset(mix('admin/vendors/js/forms/select/select2.full.min.js')) }}"></script>
@endsection
@section('page-script')
<script src="{{ asset(mix('admin/js/scripts/forms/form-select2.js')) }}"></script>
<script>
    $(document).ready(function () {
        $('#dataTable').DataTable({
            // "pageLength": 25,
            "bPaginate": false,
            "responsive": true,
            "searching": false,
            "bInfo": false,
        })
        updateCart()
        document.getElementById('payment_status').value = document.getElementById('payment').value;
    });

    $('body').on('change', '#payment', function () {
        document.getElementById('payment_status').value = document.getElementById('payment').value;
    })

    $('body').on('click', '#addToCart', function () {
        var productId = document.getElementById('product_id').value;
        var Id = document.getElementById('id').value;
        var quantity = document.getElementById('quantity').value;
        let _token = '{{ csrf_token() }}';
        $.ajax({
            url: "{{ route('add-to-order-list') }}",
            type: "POST",
            data: {
                id: Id,
                product_id: productId,
                quantity: quantity,
                _token: _token,
            },
            success: function (response) {
                if (response === 'no_stock') {
                    showMessage("This quantity not available", 'Warning', 'warning');
                }
                if (response === 'success') {
                    showMessage("Product successfully added to cart", 'Success', 'success');
                }
                if (response === 'update_success') {
                    showMessage("Cart successfully updated", 'Success', 'success');
                }
                if (response === 'invalid_quantity') {
                    showMessage("Quantity must be grater than 0", 'Warning', 'warning');
                }

                updateCart();

            }

        });
    });

    $('body').on('click', '.updateItem', function () {
        var productId = this.value;
        var Id = document.getElementById('id').value;
        var quantity = $('#product_' + this.value).val();
        let _token = '{{ csrf_token() }}';
        $.ajax({
            url: "{{ route('update-order-list') }}",
            type: "POST",
            data: {
                id: Id,
                product_id: productId,
                quantity: quantity,
                _token: _token,
            },
            success: function (response) {
                if (response === 'no_stock') {
                    showMessage("This quantity not available", 'Warning', 'warning');
                }
                if (response === 'success') {
                    showMessage("Cart successfully updated", 'Success', 'success');
                }

                if (response === 'invalid_quantity') {
                    showMessage("Quantity must be grater than 0", 'Warning', 'warning');
                }

                updateCart();

            }

        });
    });


    function updateCart() {
        var Id = $('#id').val();
        let _token = '{{ csrf_token() }}';
        $.ajax({
            url: "{{ route('get-member-order-list') }}",
            type: "POST",
            data: {
                id: Id,
                _token: _token,
            },
            success: function (response) {
                console.log(response);
                $('tbody').html("");

                $.each(response.cart, function (index, value) {
                    var row = $(
                        `<tr>
                                <td>${++index}</td>
                                <td>${value.name}</td>
                                <td class="row">
                                    <input type="number" class="d-inline-flex mt-1 mt-lg-0" style="width:50px; padding:6px;"  id="product_${value.product_id}" value="${value.quantity}"/>
                                    <button class="btn btn-icon rounded-3 border btn-outline-primary updateItem d-inline-flex ml-0 ml-lg-1 mt-1 mt-lg-0" value="${value.product_id}"> Update </button> 
                                </td>
                                
                                <td>${returnPriceWithDiscount(value)} </td>
                                <td>${returnSubPriceWithDiscount(value)}</td>
                                <td>
                                    <button class="btn btn-icon rounded-3 border btn-outline-danger removeItem" value="${value.product_id}">Remove</button>
                                </td>
                            </tr>`

                    );
                    $('tbody').append(row);

                })

                $('#subTotal').html('&euro;' + response.order.sub_total);
                $('#netDiscount').html('&euro;' + response.order.net_discount);
                $('#orderTotal').html('&euro;' + response.order.order_total);
            }

        });
    }

    $('body').on('click', '.removeItem', function () {
        var order_id = document.getElementById('id').value;

        var product_id = this.value;
        let _token = '{{ csrf_token() }}';
        $.ajax({
            url: "{{ route('remove-from-order-list') }}",
            type: "POST",
            data: {
                order_id: order_id,
                product_id: product_id,
                _token: _token,
            },
            success: function (response) {

                if (response === 'success') {
                    showMessage("Product removed successfully", 'Success', 'success');
                } else {

                    showMessage(response, 'Warning', 'warning');
                    // showMessage("Failed to remove product",'Warning','warning');
                }
                updateCart();
            }

        });
    })


    function returnPriceWithDiscount(item) {
        if (item.discount != null) {
            return `
                    &euro; ${item.price_after_discount} <br>
                    <span style="text-decoration: line-through;font-size:16px;">&euro; ${item.price}</span>
                `
        }


        return `
                LRK ${item.price}
            `
    }

    function returnSubPriceWithDiscount(item) {
        if (item.discount != null) {
            return `
                    &euro; ${parseFloat(item.price_after_discount*item.quantity).toFixed(2)} <br>
                    <span style="text-decoration: line-through;font-size:16px;">&euro; ${parseFloat(item.price*item.quantity).toFixed(2)}</span>
                `
        }


        return `
                LRK ${parseFloat(item.price*item.quantity).toFixed(2)}
            `
    }
</script>
@endsection