@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')

        @if(isset($order))
        @php $order_id=$order->id;
        $readonly='readonly'; @endphp
        @else
        @php $order_id=0;
        $readonly=''; @endphp
        @endif
        <form id="order-form" action="{{ route('process-order') }}" method="POST">
            @csrf
            <input type="hidden" name="order_id" value="{{$order_id}}" />
            <div class="row pt-1">
                <div class="col-md-12 col-xl-12">
                    <div class="pt-0">
                        <div class="card shadow-sm border">
                            <div class="card-body">
                                <div class="form-group mb-3">
                                    <label class="form-label">Select Customer</label>
                                    @if(isset($order))
                                    @php $user_id=$order->userId; @endphp
                                    @else
                                    @php $user_id=0; @endphp
                                    @endif
                                    <select id="customer-id" class="form-control" name="customer" data-bs-toggle="tooltip" data-bs-original-title="Select customer you to place order for." {{$readonly}}>
                                        @if(!isset($order))
                                        <option>Not Selected</option>
                                        @endif
                                        @foreach ($customers as $customer)
                                        <option value="{{ $customer->id }}" {!! ($user_id==$customer->id) ? 'selected' : '' !!}>{{ $customer->accountId }} &nbsp;&nbsp; {{ $customer->firstName }} {{ $customer->lastName }}</option>
                                        @endforeach
                                    </select>

                                </div>

                                <div id="customer-details">
                                    {{-- Will be filled by JS --}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 col-xl-4">
                    <div class="pt-0">
                        <div class="card shadow-sm border main-detail ">
                            <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="select-package-div" class="">
                                    <div class="form-group mb-3">
                                        <label class="form-label">Select Package</label>
                                        @if(isset($order))
                                        @php $package_id=$order->packageId; @endphp
                                        @else
                                        @php $package_id=0; @endphp
                                        @endif
                                        <select id="package-id" class="form-control w-100" name="package" data-bs-toggle="tooltip" data-bs-original-title="Place package you want to order." {{$readonly}}>
                                            @if(!isset($order))
                                            <option>Not Selected</option>
                                            @endif
                                            @foreach ($packages as $package)
                                            @php $html= $package->title.' ('.$package->pkgType->title .') '; @endphp
                                            @if($package->package_days && $package->pkgType->alias!='trial')
                                            @php $html.= ' - ('.substr(ucfirst($package->from_day),0,3).' - '.substr(ucfirst($package->to_day),0,3).')'; @endphp
                                            
                                            @endif
                                           
                                            @foreach($package->package_days as $days)
                                            @if($days->qty > 1)
                                                @switch ($days->day_id)
                                                @case(1)
                                                @php $day='Mon'; @endphp
                                                @break
                                                @case(2)
                                                @php $day='Tue'; @endphp
                                                @break
                                                @case(3)
                                                @php $day='Wed'; @endphp
                                                @break
                                                @case(4)
                                                @php $day='Thu'; @endphp
                                                @break
                                                @case(5)
                                                @php $day='Fri'; @endphp
                                                @break
                                                @case(6)
                                                @php $day='Sat'; @endphp
                                                @break
                                                @default
                                                @php $day='Sun'; @endphp
                                                @endswitch
                                            @php $html= $html." (".$day." - ".$days->qty.")"; @endphp
                                            @endif
                                            @endforeach
                                            <option value="{{ $package->id }}" {!! ($package_id==$package->id) ? 'selected' : '' !!}>{!! $html !!}</option>
                                            @endforeach
                                        </select>

                                    </div>
                                </div>
                                <!-- </div> -->
                                <!-- </div> -->

                                <!-- </div> -->
                                <!-- </div>
 
                                <div id="pane-2" class="col-md-12 col-xl-4 "> -->
                                <!-- <div class="card shadow border"> -->
                                <!-- <div class="card-body"> -->
                                <div id="pane-2" class="d-none">
                                    <div class="form-group mb-3" data-bs-toggle="tooltip" data-bs-original-title="Select order date.">
                                        <label class="form-label" for="order-date">Order Date</label>
                                        @if(isset($order))
                                        @php $order_date=date('Y-m-d',strtotime($order->created_at)); @endphp
                                        @else
                                        @php $order_date=\Carbon\Carbon::now()->format('Y-m-d') ; @endphp
                                        @endif
                                        <input id="order-date" name="order_date" type="date" class="form-control" value="{{ $order_date }}">
                                    </div>

                                    <div class="form-group mb-3">
                                        @if(isset($order))
                                        @php $delivery_date=date('Y-m-d',strtotime($order->delivery_date)); @endphp
                                        @else
                                        @php $delivery_date=\Carbon\Carbon::tomorrow()->format('Y-m-d') ; @endphp
                                        @endif
                                        <label class="form-label" for="delivery-date">Delivery Date</label>
                                        <input id="delivery-date" name="delivery_date" type="date" class="form-control" value="{{ $delivery_date }}">
                                    </div>

                                    <div class="form-group mb-3">
                                        <label class="form-label" for="address-type">Address Type</label>
                                        @if(isset($order))
                                        @php $address_type=$order->address_type; @endphp
                                        @else
                                        @php $address_type='house' ; @endphp
                                        @endif
                                        <select id="address-type" class="form-select" name="address_type" data-bs-toggle="tooltip" data-bs-original-title="Select address type.">
                                            <option value="house" {!! ($address_type=='house' ) ? 'selected' : '' !!}>House</option>
                                            <option value="apartment" {!! ($address_type=='apartment' ) ? 'selected' : '' !!}>Apartment</option>
                                            <option value="business" {!! ($address_type=='business' ) ? 'selected' : '' !!}>Business</option>
                                        </select>
                                    </div>

                                    <div class="form-group mb-3 businessDiv">
                                        @if(isset($order))
                                        @php $business_name=$order->business_name; @endphp
                                        @else
                                        @php $business_name=''; @endphp
                                        @endif
                                        <label class="form-label" for="business_name">Business Name</label>
                                        <input id="business_name" name="business_name" type="text" class="form-control" value="{{ $business_name }}">
                                    </div>

                                    <div class="form-group mb-3 buzzerDiv">
                                        @if(isset($order))
                                        @php $buzzer_code=$order->buzzer_code; @endphp
                                        @else
                                        @php $buzzer_code=''; @endphp
                                        @endif
                                        <label class="form-label" for="buzzer_code">Buzzer Code</label>
                                        <input id="buzzer_code" name="buzzer_code" type="text" class="form-control" value="{{ $buzzer_code }}">
                                    </div>


                                    <div class="form-group mb-3 unitDiv">
                                        @if(isset($order))
                                        @php $unit_number=$order->unit_number; @endphp
                                        @else
                                        @php $unit_number=''; @endphp
                                        @endif
                                        <label class="form-label" for="unit_number">Unit Number</label>
                                        <input id="unit_number" name="unit_number" type="text" class="form-control" value="{{ $unit_number }}">
                                    </div>

                                    <div class="form-group mb-3">
                                        <label class="form-label">Delivery Instructions:</label>
                                        @if(isset($order))
                                        @php $delivery_instruction_id=$order->delivery_instruction_id; @endphp
                                        @else
                                        @php $delivery_instruction_id=0; @endphp
                                        @endif
                                        @foreach ($deliveryInstructions as $deliveryInstruction)
                                        <div class="form-check my-2" 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 }}" {!! ($delivery_instruction_id==$deliveryInstruction->id) ? 'checked' : '' !!}>
                                            <label for="ins{{ $deliveryInstruction->id }}">{{ $deliveryInstruction->title }}</label>
                                        </div>
                                        @endforeach
                                    </div>

                                    <div class="form-group mb-3">

                                        @if(isset($order))
                                        @php $delivery_instructions=$order->delivery_instructions; @endphp
                                        @else
                                        @php $delivery_instructions=''; @endphp
                                        @endif
                                        <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.">{!! $delivery_instructions !!}</textarea>
                                    </div>
                                </div>
                            </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 class="col-md-12 col-xl-4">
                    <div id="payment-details-container" class="card shadow-lg border d-none">
                        <div class="card-body">
                            <div id="payment-details" class="">
                                <div class="row">
                                    <div class="col-12">
                                        <div class="form-group mb-3">
                                            <label class="form-label" for="payment-type">Payment Type</label>
                                            @if(isset($order) && isset($order->payment))
                                            @php $payment_method=$order->payment->payment_method; @endphp
                                            @else
                                            @php $payment_method=''; @endphp
                                            @endif
                                            <select id="payment-type" class="form-select" name="payment_type" data-bs-toggle="tooltip" data-bs-original-title="Select Payment type.">
                                                @foreach($paymentMethods as $method)
                                                <option value="{{$method->code}}" {!! ($payment_method==$method->code) ? 'selected' : '' !!}>{{$method->name}}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="form-group mb-3" data-bs-toggle="tooltip" data-bs-original-title="Select Payment date.">
                                            <label class="form-label" for="payment-date">Payment Date</label>
                                            @if(isset($order) && isset($order->payment))
                                            @php $payment_date=date('Y-m-d',strtotime($order->payment->created_at)); @endphp
                                            @else
                                            @php $payment_date=\Carbon\Carbon::tomorrow()->format('Y-m-d'); @endphp
                                            @endif
                                            <input id="payment-date" name="payment_date" type="date" class="form-control" value="{{ $payment_date }}">
                                        </div>

                                        <div class="form-group mb-3">
                                            @if(isset($order) && isset($order->payment))
                                            @php $transaction_id=$order->payment->transaction_id; @endphp

                                            @endif
                                            <label class="form-label" for="transaction-id">Transaction Id</label>
                                            <input id="transaction-id" name="transaction_id" type="text" class="form-control" value="{{ $transaction_id }}">
                                        </div>
                                        <div class="form-group mb-3">
                                            <label class="form-label" for="transaction-id">Payment Status</label><br />
                                            @if(isset($order) && isset($order->payment))
                                            @php $payment_status=$order->payment->status; @endphp
                                            @else
                                            @php $payment_status='P'; @endphp
                                            @endif
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" name="payment_status" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="P" {!! ($payment_status=='P' ) ? 'checked' : '' !!}>
                                                <label class="form-check-label" for="inlineRadio1">Pending</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" name="payment_status" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="C" {!! ($payment_status=='C' ) ? 'checked' : '' !!}>
                                                <label class="form-check-label" for="inlineRadio2">Canceled</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" name="payment_status" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="S" {!! ($payment_status=='S' ) ? 'checked' : '' !!}>
                                                <label class="form-check-label" for="inlineRadio2">Completed</label>
                                            </div>
                                        </div>

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

                            <div class="row">
                                <div class="col-md-12 pt-3 text-center">
                                    @if(isset($package))
                                    @php $price=$package->price @endphp
                                    @else
                                    @php $price=0 @endphp
                                    @endif
                                    <input id="total-price" type="hidden" name="total_price" value="{{ $price }}">

                                    <button onclick="submitForm()" id="order-package-btn" type="button" class="btn rounded-0 f-18 fw-medium form-control" data-bs-toggle="tooltip" data-bs-original-title="Place your order.">
                                        <span id="order-package-btn-span" class="f-20">
                                            Continue &nbsp;$<span id="total-price-span">{{ number_format($price, 2) }}</span>
                                        </span>
                                    </button>
                                </div>
                            </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) {
                if (data.status == true) {
                    $('.main-detail').removeClass('d-none');
                    $('#customer-details').html(data.html);
                    $('#select-package-div').removeClass('d-none');
                } else {
                    $('.main-detail').addClass('d-none');
                    $('#customer-details').html('');
                    $('#select-package-div').addClass('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,
            data: {
                order_id: "{{$order_id}}"
            },
            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) {
                if (data.status == true) {
                    $('#package-details-container').removeClass('d-none');
                    $('#pane-2').removeClass('d-none');
                    $('#package-details').html(data.html);

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

                    $('[data-bs-toggle="tooltip"]').each(function() {
                        new bootstrap.Tooltip(this);
                    });
                    $('#total-price-span').html(data.price);
                    $('#total-price').val(data.price);
                    // $('#place-order-section .card').css('min-height', '70vh');

                    fetchCoupons();

                    $('#payment-details-container').removeClass('d-none');
                    // $('#pane-2').removeClass('d-none');
                    // $('#payment-details').html(data);
                } else {
                    $('#package-details-container').addClass('d-none');
                    $('#pane-2').addClass('d-none');
                    $('#package-details').html('');
                    $('#payment-details-container').addClass('d-none');
                }
            }
        });
    }

    // 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() {
        addon = 0;
        item_id = 0;
        
        $('.businessDiv').hide();
        $('.unitDiv').hide();
        $('.buzzerDiv').hide();

        $('#customer-id, #package-id').select2();

        if ($('#address-type').val() && $('#address-type').val() != null) {
            address = $('#address-type').val();
            $('.unitDiv').hide();
            $('.businessDiv').hide();
            $('.buzzerDiv').hide();
            if (address != "house") {
                $('.unitDiv').show();
                if (address == "business") {
                    $('.businessDiv').show();
                } else if (address == 'apartment') {
                    $('.buzzerDiv').show();
                }
            }
        }

        if ($('#customer-id').val() && $('#customer-id').val() != null) {
            let x = $('#customer-id').val();
            fetchCustomer(x);
        }

        if ($('#package-id').val() && $('#package-id').val() != null) {
            let x = $('#package-id').val();
            fetchPackge(x);
        }

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

            fetchCustomer(x);
        });

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

            fetchPackge(x);
        });

        $('#customer-id').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');
            }
        });

        $(document).on('change', '#address-type', function() {
            address = $(this).val();
            $('.unitDiv').hide();
            $('.businessDiv').hide();
            $('.buzzerDiv').hide();
            if (address != "house") {
                $('.unitDiv').show();
                if (address == "business") {
                    $('.businessDiv').show();
                } else if (address == 'apartment') {
                    $('.buzzerDiv').show();
                }
            }
        })
        // $("#delivery-date").datepicker();

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