@extends('layouts/contentLayoutMaster')

@section('title', 'Add Orders')

@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">
                <h3>
                    Add Order
                </h3>
                <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">


                <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 Member:</label>
                        <select class="custom-select select2 @error('member') is-invalid @enderror" name="member_id"
                            required id="member">
                            <option value="">Select Member</option>
                            @if( isset($members) && $members != '[]' && $members != null)
                            @foreach($members as $member)
                            <option value="{{ $member->id }}" @if(session()->getOldInput('id') == $member->id) selected
                                @endif>{{ ucwords($member->first_name.' '.$member->last_name) }}</option>
                            @endforeach
                            @else
                            <option value="">Members not found</option>
                            @endif
                        </select>
                        @error('member')
                        <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>Select Product:</label>
                        <select class="form-control 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 value="">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">
                        <br><br>
                        <button class=" btn btn-primary " id="addToCart" onclick="preventDefault();"><i
                                data-feather="shopping-cart" class="font-medium-2"></i>&nbsp;Add To Cart</button>
                    </div>
                </div>

                <div class="table-responsive mt-1 shadow-lg border border-primary border-1 card" id="cart"
                    style="display: none;">
                    <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" style="display: none;" id="summary">
                    <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">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">
                            Net Discount: <span id="netDiscount" 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">
                            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" name="payment_status" required>
                                <option value="">Select Payment Status</option>
                                <option value="pending" @if(session()->getOldInput('payment_status') == 'pending')
                                    selected @endif>Pending</option>
                                <option value="success" @if(session()->getOldInput('payment_status') == 'success')
                                    selected @endif>Success</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="card shadow-lg border border-primary border-1" id="shipping" style="display: none;">
                    <div class="card-header pb-0">
                        <h4 class="card-title ">
                            Customer Shipping Details
                        </h4>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('order-add') }}" method="POST" id="orderForm">

                            <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"
                                        value="{{ session()->getOldInput('name') }}" required="required">
                                    @error('name')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                    @enderror
                                </div>
                                @csrf

                                <input type="hidden" id="payment_status" name="payment_status" value="" required>
                                <input type="hidden" id="orderer" name="id" 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"
                                        value="{{ session()->getOldInput('contact_number') }}" required>
                                    @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"
                                        value="{{ session()->getOldInput('email') }}" required>
                                    @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"
                                        value="{{ session()->getOldInput('home_no') }}" required>
                                    @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"
                                        value="{{ session()->getOldInput('street') }}" required>
                                    @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"
                                        value="{{ session()->getOldInput('city') }}" required>
                                    @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"
                                        value="{{ session()->getOldInput('state') }}" required>
                                    @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"
                                        value="{{ session()->getOldInput('postal_code') }}" required>
                                    @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"
                                        value="{{ session()->getOldInput('country') }}" required>
                                    @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(session()->getOldInput('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="plus-square" class="font-medium-2"></i>&nbsp;Add Order
                    </button>
                </div>
                </form>


            </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 Id = $('#product_id').val();
        var quantity = $('#quantity').val();
        var member = $('#member').val();
        let _token = '{{ csrf_token() }}';
        $.ajax({
            url: "{{ route('add-to-cart') }}",
            type: "POST",
            data: {
                id: Id,
                quantity: quantity,
                member: member,
                _token: _token,
            },
            success: function (response) {
                if (response === 'no_member') {
                    showMessage("Please select a member", 'Warning', 'warning');
                }
                if (response === 'no_product') {
                    showMessage("Please select a product", 'Warning', 'warning');
                }
                if (response === 'no_quantity') {
                    showMessage("Please give a valid quantity", 'Warning', 'warning');
                }
                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('change', '#member', function () {
        updateCart();
    });

    $('body').on('click', '.updateItem', function () {
        var Id = this.value;
        var quantity = $('#product_' + this.value).val();
        var member = $('#member').val();
        let _token = '{{ csrf_token() }}';
        $.ajax({
            url: "{{ route('update-cart-item') }}",
            type: "POST",
            data: {
                id: Id,
                quantity: quantity,
                member: member,
                _token: _token,
            },
            success: function (response) {
                if (response === 'no_member') {
                    showMessage("Please select a member", 'Warning', 'warning');
                }
                if (response === 'no_product') {
                    showMessage("Please select a product", 'Warning', 'warning');
                }
                if (response === 'no_quantity') {
                    showMessage("Please give a valid quantity", 'Warning', 'warning');
                }
                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 = $('#member').val();
        document.getElementById('orderer').value = Id;
        let _token = '{{ csrf_token() }}';
        $.ajax({
            url: "{{ route('get-member-cart') }}",
            type: "POST",
            data: {
                id: Id,
                _token: _token,
            },
            success: function (response) {
                $('tbody').html("");
                var subTotal = 0;
                var netDiscount = 0;
                var orderTotal = 0;
                console.log(response);
                $.each(response.cart, function (index, value) {
                    console.log(response);
                    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);
                    if (value.discount > 0 && value.discount_status) {
                        netDiscount += Number(value.discount) * Number(value.quantity);
                        orderTotal += Number(value.price_after_discount) * Number(value.quantity);
                    } else {
                        orderTotal += Number(value.price) * Number(value.quantity);
                    }
                    subTotal += Number(value.price) * Number(value.quantity);


                })

                $('#subTotal').html('&euro;' + subTotal);
                $('#orderTotal').html('&euro;' + orderTotal);
                $('#netDiscount').html('&euro;' + netDiscount);
                document.getElementById('cart').style.display = 'block';
                document.getElementById('summary').style.display = 'block';
                document.getElementById('shipping').style.display = 'block';

            }

        });
    }

    $('body').on('click', '.removeItem', function () {
        var member_id = $('#member').val();

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

                if (response === 'success') {
                    showMessage("Product removed successfully", 'Success', 'success');
                } else {
                    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