@extends('layouts.admin')

@section('content')
    <link rel="stylesheet" href="{{ asset('assets/css/select2.min.css') }}">

    <section id="place-order-section" class="pc-container">
        <div class="pc-content">
            <div class="page-header">
                <div class="page-block">
                    <div class="row align-items-center">
                        <div class="col-md-12">
                            <ul class="breadcrumb">
                                <li class="breadcrumb-item">Order Management</li>
                                <li class="breadcrumb-item">Place Order</li>
                            </ul>
                        </div>
                        <div class="col-md-12">
                            <div class="page-header-title">
                                <h3 class="mb-0">Place Order</h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            @include('include.errors')
            @include('include.flash-message')

            <form id="order-form" action="{{ route('process-order') }}" method="POST">
                @csrf

                <div class="row pt-1">
                    <div class="col-md-12 col-xl-4">
                        <div class="pt-0">
                            <div class="card shadow-sm border mh-70vh">
                                <div class="card-body">
                                    <div class="form-group mb-3">
                                        <label class="form-label">Select Customer</label>

                                        <select id="customer-select" class="form-control" data-bs-toggle="tooltip" data-bs-original-title="Select customer you to place order for.">
                                            <option selected disabled>Not Selected</option>

                                            @foreach ($customers as $customer)
                                                <option value="{{ $customer->id }}">{{ $customer->accountId }} &nbsp;&nbsp; {{ $customer->firstName }} {{ $customer->lastName }}</option>
                                            @endforeach
                                        </select>

                                        <input id="customer-id" type="hidden" name="customer">
                                    </div>

                                    <div id="customer-details">
                                        {{-- Will be filled by JS --}}
                                    </div>

                                    <div id="select-package-div" class="mt-5 d-none">
                                        <div class="form-group mb-3">
                                            <label class="form-label">Select Package</label>

                                            <select id="package-select" class="form-control w-100" data-bs-toggle="tooltip" data-bs-original-title="Place package you want to order.">
                                                <option selected disabled>Not Selected</option>

                                                @foreach ($packages as $package)
                                                    <option value="{{ $package->id }}">{{ $package->title }}</option>
                                                @endforeach
                                            </select>

                                            <input id="package-id" type="hidden" name="package">
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                    <div id="pane-2" class="col-md-12 col-xl-4 d-none">
                        <div class="card shadow border">
                            <div class="card-body">
                                <div class="form-group mb-3" data-bs-toggle="tooltip" data-bs-original-title="Select delivery date.">
                                    <label class="form-label" for="delivery-date">Delivery Date</label>
                                    <input id="delivery-date" name="delivery_date" type="text" class="form-control" value="{{ \Carbon\Carbon::tomorrow()->format('Y-m-d') }}">
                                </div>

                                <div class="form-group mb-3">
                                    <label class="form-label" for="address-type">Address Type</label>

                                    <select id="address-type" class="form-select" name="address_type" data-bs-toggle="tooltip" data-bs-original-title="Select address type.">
                                        <option value="house">House</option>
                                        <option value="apartment">Apartment</option>
                                        <option value="business">Business</option>
                                    </select>
                                </div>

                                <div class="form-group mb-3">
                                    <label class="form-label">Delivery Instructions:</label>

                                    @foreach ($deliveryInstructions as $deliveryInstruction)
                                        <div class="form-check" data-bs-toggle="tooltip" data-bs-original-title="Select delivery instruction (if any).">
                                            <input id="ins{{ $deliveryInstruction->id }}" name="delivery_instruction_id" class="form-check-input input-primary cursor-p delivery-ins" type="radio" name="delivery-instructions" value="{{ $deliveryInstruction->id }}">
                                            <label for="ins{{ $deliveryInstruction->id }}">{{ $deliveryInstruction->title }}</label>
                                        </div>
                                    @endforeach
                                </div>

                                <div class="form-group mb-3">
                                    <textarea id="delivery-instructions" name="delivery_instructions" class="form-control" placeholder="Delivery instruction details - Optional" data-bs-toggle="tooltip" data-bs-original-title="Optional delivery instruction details."></textarea>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-12 col-xl-4">
                        <div id="package-details-container" class="card shadow-lg border d-none">
                            <div class="card-body">
                                <div id="package-details" class="">
                                    {{-- Will be filled by JS --}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </section>

    <script src="{{ asset('assets/js/select2.min.js' ) }}"></script>

    <script>
        var package_price = 0;
        var total_price = 0;
        var no_of_tiffins = 0;
        var appliedDiscount = 0;

        // Fetch selected customer record.
        function fetchCustomer(x) {
            var url = "{{ route('fetch-customer', ['user' => 'arg1']) }}";
            url = url.replace('arg1', x);

            $.ajax({
                type: 'POST',
                url: url,
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                success: function(data) {
                    $('#customer-details').html(data);
                    $('#select-package-div').removeClass('d-none');
                }
            });
        }

        // Fetch all coupons that are active, not expired, not already assigned to given customer.
        function fetchCoupons() {
            var url = "{{ route('fetch-coupons', ['customer' => 'arg1']) }}";
            url = url.replace('arg1', $('#customer-id').val());

            $.ajax({
                type: 'POST',
                url: url,
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                success: function(data) {
                    $('#coupon-container').html(data);
                }
            });
        }

        // Fetch selected package record.
        function fetchPackge(x) {
            var url = "{{ route('fetch-package', ['package' => 'arg1']) }}";
            url = url.replace('arg1', x);

            $.ajax({
                type: 'POST',
                url: url,
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                success: function(data) {
                    $('#package-details-container').removeClass('d-none');
                    $('#pane-2').removeClass('d-none');
                    $('#package-details').html(data);

                    total_price = $('#package-price').text();
                    no_of_tiffins = parseInt($('#no-of-tiffins').text());

                    $('[data-bs-toggle="tooltip"]').each(function() {
                        new bootstrap.Tooltip(this);
                    });

                    $('#place-order-section .card').css('min-height','70vh');

                    fetchCoupons();
                }
            });
        }

        // Swap item. Example cancel Rice and add quantity to Roti.
        // ele: Item we are cancelling.
        // id: id of item we are cancelling.
        // v: quantity we are adding.
        // target: Item we are increasing.
        function swap(ele, id, v, target) {
            if ($(ele).prop('checked')) {
                let new_qty = parseInt($('#item-qty-'+target).val()) + parseInt(v);

                $('#item-qty-'+target).val(new_qty);
                $('#item-qty-'+id).val(0);
                $('#item-'+target).text(new_qty);
                $('#swap-item-'+target).val(1);
                $('#swap-item-qty-'+target).val(v);
            } else {
                let new_qty = parseInt($('#item-qty-'+target).val()) - parseInt(v);

                $('#item-qty-'+target).val(new_qty);
                $('#item-qty-'+id).val(v);
                $('#item-'+target).text(new_qty);
                $('#swap-item-'+target).val(0);
                $('#swap-item-qty-'+target).val(0);
            }
        }

        // Decrement quantity of addon by 1 and adjust total price.
        function addonMinus(el) {
            let v = parseInt($(el).val());

            if (v > 0) {
                v = v - 1;

                $(el).val(v);

                let addon_price = (Number($(el).attr('data-price')));
                let t = addon_price * no_of_tiffins;

                t = Number(total_price) - Number(t);
                total_price = t.toFixed(2);

                $('#total-price-span').text(total_price);
                $('#total-price').val(total_price);
            }
        }

        // Increment quantity of addon by 1 and adjust total price.
        function addonPlus(el) {
            let v = parseInt($(el).val()) + 1;

            $(el).val(v);

            let addon_price = (Number($(el).attr('data-price')));
            let t = addon_price * no_of_tiffins;

            t = Number(total_price) + Number(t);
            total_price = t.toFixed(2);

            $('#total-price-span').text(total_price);
            $('#total-price').val(total_price);
        }

        function submitForm() {
            $('#order-package-btn').prop('disabled', true);
            $('#order-package-btn-span').text('Processing...');
            $('#order-form').submit();
        }

        function applyCoupon() {
            let selectedOption = $('#coupon-select option:selected');
            let couponAmount = $(selectedOption).attr('data-amount');
            let discountType = $(selectedOption).attr('data-discount-type');
            let discount = 0;

            $('#coupon-id').val(0);

            if (couponAmount != undefined && discountType != undefined) {
                $('#coupon-select').prop('disabled', true);
                $('#apply-coupon-btn').addClass('d-none');
                $('#remove-coupon-btn').removeClass('d-none');
                $('#coupon-id').val($(selectedOption).val());

                if (discountType == 'flat') {
                    discount = couponAmount;
                } else {
                    let t = total_price;
                    discount = t/100 * couponAmount;
                }

                appliedDiscount = discount;
                total_price = total_price - discount;

                $('#total-price-span').text(total_price);
                $('#total-price').val(total_price);
            }
        }

        function removeCoupon() {
            $('#coupon-id').val(0);

            $('#coupon-select').prop('disabled', false);
            $('#coupon-select').val(0).trigger('change');

            $('#apply-coupon-btn').removeClass('d-none');
            $('#remove-coupon-btn').addClass('d-none');

            total_price = Number(total_price) + Number(appliedDiscount);
            appliedDiscount = 0;

            $('#total-price-span').text(total_price);
            $('#total-price').val(total_price);
        }

        $(document).ready(function() {
            $('#customer-select, #package-select').select2();

            $('#customer-select').change(function() {
                let x = $(this).val();

                $('#customer-id').val(x);

                fetchCustomer(x);
            });

            $('#package-select').change(function() {
                let x = $(this).val();

                $('#package-id').val(x);

                fetchPackge(x);
            });

            $('#customer-select').on('select2:open', function() {
                $('.select2-search__field')[0].focus();
            });

            $(document).on('change', '#coupon-select', function() {
                let x = $(this).val();

                $('.coupon-tr').addClass('d-none');

                if (x == null) {
                    $('#apply-coupon-btn').addClass('d-none')
                } else {
                    $('#apply-coupon-btn').removeClass('d-none');
                    $('.coupon-id-' + x).removeClass('d-none');
                }
            });

            $( "#delivery-date" ).datepicker();

            $( "#delivery-date" ).change(function() {
                let dt = $( "#delivery-date" ).val();
                $( "#delivery-date" ).val(dt);
            })
        })
    </script>
@endsection