@extends('admin.layouts.app')

@section('title', $title)

@section('content')
    <div id="order">
        <!-- Order Form START -->
        <form class="form-horizontal" action="{{route('ch-admin.order.store')}}" method="post">
            <div class="row">
                @csrf
                <!-- Left Section START -->
                <div class="col-md-8">
                    <div class="bgc-white bd bdrs-3 p-20 mB-20">
                        <section class="invoice mb-20">
                            <!-- Page Title START -->
                            <div class="row">
                                <div class="col-xs-12">
                                    <h3 class="c-grey-900 mT-10 mB-30">
                                        <i class="fa fa-cart-plus"></i> Create Order
                                    </h3>
                                </div>
                            </div>
                            <!-- Page Title END -->

                            <!-- User Field & Order Status Field START -->
                            <div class="row invoice-info">
                                <!-- User Field START -->
                                <div class="col-sm-6 invoice-col">
                                    <p class="lead mb-2">Customer:</p>
                                    <select class="form-control" name="user_id" v-on:change="getBillingInfo"
                                            v-model="selectedUserId" required>
                                        <option value="">Select customer</option>
                                        @foreach($users as $user)
                                            <option
                                                value="{{ $user->id }}">{{ $user->first_name }} {{ $user->last_name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <!-- User Field END -->

                                <!-- Order Status Field START -->
                                <div class="col-sm-6 invoice-col">
                                    <p class="lead mb-2">Order Status:</p>
                                    <select class="form-control select2" name="status" required>
                                        <option value="">Select status</option>
                                        @foreach(getConstants('order_status') as $key => $value)
                                            <option value="{{$key}}">
                                                {{$value}}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <!-- Order Status Field END -->
                            </div>
                            <!-- User Field & Order Status Field END -->

                            <!-- Billing Info START -->
                            <div class="row" v-if="selectedUserId">
                                <div v-if="userBillingInfo.loaded">
                                    <div v-if="Object.keys(userBillingInfo).length === 1">
                                        <p class="mt-3">
                                            No billing address found.
                                            Please <a href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#billingModal">create one</a>.
                                        </p>
                                    </div>
                                    <div v-else>
                                        <p class="lead mt-2 mb-2">
                                            Billing Info
                                            <button
                                                type="button"
                                                class="btn btn-primary btn-sm"
                                                data-bs-toggle="modal"
                                                data-bs-target="#billingModal" :disabled="loading">
                                                Edit Billing Info
                                            </button>: </p>
                                        <address>
                                            <strong>Name:</strong> @{{ userBillingInfo.first_name }} @{{ userBillingInfo.last_name }}<br>
                                            <strong>Phone Number:</strong> @{{ userBillingInfo.phone_number }}<br>
                                            <strong>Email:</strong> @{{ userBillingInfo.email }}<br>
                                            <strong>Address:</strong> @{{ userBillingInfo.address }}<br>
                                            <strong>City:</strong> @{{ userBillingInfo.city }}<br>
                                            <strong>State:</strong> @{{ userBillingInfo.state?.name }}<br>
                                            <strong>Country:</strong> @{{ userBillingInfo.country?.name }}<br>
                                            <strong>Zip code:</strong> @{{ userBillingInfo.zip }}<br>
                                        </address>
                                    </div>
                                </div>
                            </div>
                            <!-- Billing Info END -->

                            <!-- Add Product Modal START -->
                            <div class="modal fade" id="addProductModal" tabindex="-1" aria-labelledby="addProductModal"
                                 aria-hidden="true">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h1 class="modal-title fs-5" id="exampleModalLabel">Add Product</h1>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                    aria-label="Close" :disabled="loading"></button>
                                        </div>
                                        <div class="modal-body">
                                            <!-- Product Field -->
                                            <div class="form-group mb-3">
                                                <label for="product_id" class="form-label">Product</label>
                                                <select id="product_id" v-on:change="productChange" name="product_id"
                                                        class="form-control" required>
                                                    <option value="">Select a Product</option>
                                                    @foreach($products as $product)
                                                        <option
                                                            value="{{ $product->id }}" {{ old('product_id') == $product->id ? 'selected' : '' }}>{{ $product->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>

                                            <!-- Plan Field -->
                                            <div class="form-group mb-3">
                                                <label for="plan_id" class="form-label">Plan</label>
                                                <select id="plan_id" v-model="selectedPlanId" v-on:change="planChange"
                                                        name="plan_id" class="form-control" required>
                                                    <option value="">Select a Plan</option>
                                                    <option v-for="plan in plans" :key="plan.id" :value="plan.id">@{{
                                                        plan.name }}
                                                    </option>
                                                </select>
                                            </div>

                                            <!-- Pricing Tier Field -->
                                            <div class="form-group mb-3">
                                                <label for="pricing_tier_id" class="form-label">Pricing Tier</label>
                                                <select id="pricing_tier_id" v-model="selectedPricingTierId"
                                                        name="pricing_tier_id" class="form-control" required>
                                                    <option value="">Select a Pricing Tier</option>
                                                    <option v-for="pricingTier in pricingTiers" :key="pricingTier.id"
                                                            :value="pricingTier.id">@{{ pricingTier.tier_name }}
                                                    </option>
                                                </select>
                                            </div>

                                            <!-- Addons Field -->
                                            <div class="form-group mb-3" v-if="addons">
                                                <label class="form-label">Addons</label>
                                                <div v-for="addon in addons" :key="addon.id" class="form-check">
                                                    <input type="checkbox" class="form-check-input" :id="`addon-${addon.id}`" :value="addon.id" v-model="selectedAddons"/>
                                                    <label :for="`addon-${addon.id}`" class="form-check-label">@{{ addon.name }} - {!! setting('price_format', '1') == '2' ? setting('currency', 'USD') : ch_currency_symbol(setting('currency', 'USD')) !!}@{{ addon.price }}</label>
                                                </div>
                                            </div>

                                            <button type="button" class="btn btn-primary" v-on:click="addToCart"
                                                    :disabled="loading">Add to Cart
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Add Product Modal END -->

                            <!-- Product Table START -->
                            <div class="row">
                                <div class="col-xs-12 table-responsive">
                                    <p class="lead mt-30">Select Product:</p>
                                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addProductModal" :disabled="loading">Add Product</button>
                                    <table class="table table-striped">
                                        <thead>
                                        <tr>
                                            <th>Product</th>
                                            <th>Quantity</th>
                                            <th>Price</th>
                                            <th>Action</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr v-for="item in cartData.items">
                                            <td :class="{'px-4': item.options.type === 'addon'}" v-html="item.name"></td>
                                            <td v-html="item.qty"></td>
                                            <td v-html="item.price"></td>
                                            <td>
                                                <button type="button" class="btn btn-sm btn-danger" v-on:click="removeFromCart(item.rowId)">
                                                    <i class="ti-close icon"></i>
                                                </button>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <!-- Product Table END -->

                            <!-- Coupon Code Section START -->
                            <div class="row mb-3" v-if="cartData.itemsCount">
                                <p class="lead mt-2">Coupon Code Details:</p>
                                <div class="col-md-4">
                                    <label for="couponCode">Coupon Code:</label>
                                </div>
                                <div class="col-md-4">
                                    <input type="text" class="form-control" id="couponCode" v-model="couponData.code"
                                           placeholder="Enter your coupon here"/>
                                </div>
                                <div class="col-md-4">
                                    <button type="button" class="btn btn-primary" v-if="!couponData.applied"
                                            v-on:click="applyCoupon"><i class="ti-check icon"></i></button>
                                    <button type="button" class="btn btn-danger" v-if="couponData.applied"
                                            v-on:click="removeCoupon"><i class="ti-close icon"></i></button>
                                </div>
                            </div>
                            <!-- Coupon Code Section END -->

                            <!-- Payment Details Section START -->
                            <div class="row">
                                <!-- Payment Methods Field START -->
                                <div class="col-md-6">

                                    <p class="lead">Payment Details:</p>

                                    <div class="table-responsive">
                                        <table class="table">
                                            <tr>
                                                <th class="w-50p">Payment method:</th>
                                                <td>
                                                    <select class="form-control" name="payment_method" required>
                                                        <option value="">Select a payment method</option>
                                                        <option v-for="(method, key) in paymentMethods" :key="key"
                                                                :value="key">@{{ method.name }}
                                                        </option>
                                                    </select>
                                                </td>
                                            </tr>
                                            <tr>
                                                <th>Transaction ID</th>
                                                <td>
                                                    <input type="text" class="form-control" name="transaction_id"
                                                           v-model="transaction_id"/>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                                <!-- Payment Methods Field END -->
                                <!-- Payment Summary Section START -->
                                <div class="col-md-6">
                                    <p class="lead">Summary</p>

                                    <div class="table-responsive">
                                        <table class="table">
                                            <tr>
                                                <th class="w-50p">Subtotal:</th>
                                                <td v-html="cartData.subTotal"></td>
                                            </tr>
                                            <tr v-if="couponData.applied">
                                                <th>Coupon code</th>
                                                <td v-html="couponData.code"></td>
                                            </tr>
                                            <tr v-if="couponData.applied">
                                                <th>Coupon amount</th>
                                                <td v-html="cartData.discount"></td>
                                            </tr>
                                            <tr v-if="cartData.tax">
                                                <th>Tax</th>
                                                <td v-html="cartData.tax"></td>
                                            </tr>
                                            <tr>
                                                <th>Total</th>
                                                <td v-html="cartData.total"></td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                                <!-- Payment Summary Section START -->
                            </div>
                            <!-- Payment Details Section START -->
                        </section>
                    </div>
                </div>
                <!-- Left Section END -->

                <!-- Right Section START -->
                <div class="col-md-4">
                    <div class="bgc-white bd bdrs-3 p-20 mB-20">
                        <div class="mb-5">
                            <h4 class="c-grey-900 mT-10">Create Order</h4>
                            <button type="submit" class="btn btn-block btn-primary" :disabled="loading">Create Order
                            </button>
                        </div>
                    </div>
                </div>
                <!-- Right Section END -->
            </div>
        </form>
        <!-- Order Form END -->

        <!-- Billing Info Modal START -->
        <div class="modal fade" id="billingModal" tabindex="-1" aria-labelledby="billingModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="billingModalLabel">Billing Info</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form id="billingForm">
                            <div v-if="errors.general" class="alert alert-danger">
                                @{{ errors.general }}
                            </div>

                            <div v-if="errors">
                                <div class="alert alert-danger" v-for="(error, field) in errors" :key="field">
                                    @{{ error[0] }}
                                </div>
                            </div>

                            <div class="mb-3">
                                <label for="first_name" class="form-label">First Name</label>
                                <input type="text" class="form-control" id="first_name" v-model="formBillingInfo.first_name"
                                       required>
                            </div>

                            <div class="mb-3">
                                <label for="last_name" class="form-label">Last Name</label>
                                <input type="text" class="form-control" id="last_name" v-model="formBillingInfo.last_name"
                                       required>
                            </div>

                            <div class="mb-3">
                                <label for="email" class="form-label">Email</label>
                                <input type="email" class="form-control" id="email" v-model="formBillingInfo.email"
                                       required>
                            </div>

                            <div class="mb-3">
                                <label for="phone" class="form-label">Phone</label>
                                <input type="tel" class="form-control" id="phone" v-model="formBillingInfo.phone_number"
                                       required>
                            </div>

                            <div class="mb-3">
                                <label for="address" class="form-label">Address</label>
                                <input type="text" class="form-control" id="address" v-model="formBillingInfo.address"
                                       required>
                            </div>

                            <div class="mb-3">
                                <label for="city" class="form-label">City</label>
                                <input type="text" class="form-control" id="city" v-model="formBillingInfo.city" required>
                            </div>

                            <div class="mb-3">
                                <label for="zip" class="form-label">Zip Code</label>
                                <input type="text" class="form-control" id="zip" v-model="formBillingInfo.zip" required>
                            </div>

                            <div class="mb-3">
                                <label for="country_id" class="form-label">Country</label>
                                <select class="form-select" id="country_id" v-on:change="countryChange"
                                        v-model="formBillingInfo.country_id" required>
                                    <option value="">Select a country</option>
                                    @foreach($countries as $country)
                                        <option value="{{ $country->id }}">{{ $country->name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="mb-3">
                                <label for="state_id" class="form-label">State</label>
                                <select class="form-select" id="state_id" v-model="formBillingInfo.state_id" required>
                                    <option value="">Select a state</option>
                                    <option v-for="state in states" :key="state.id" :value="state.id">@{{ state.name }}
                                    </option>
                                </select>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" :disabled="loading">
                            Close
                        </button>
                        <button type="button" class="btn btn-primary" form="billingForm" :disabled="loading"
                                v-on:click="setBillingInfo">Save Changes
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Billing Info Modal END -->

    </div>

    <script>
        const setBillingInfoUrl = '{{ route("ch-admin.setBillingInfo") }}';
        const getBillingInfoUrl = '{{ url("/ch-admin/billing-address") }}';
        const getStatesUrl = '{{ url("/ch-admin/states") }}';
        const getPlansUrl = '{{ url("/ch-admin/plans") }}';
        const getPricingTiersUrl = '{{ url("/ch-admin/pricingTiers") }}';
        const addToCartUrl = '{{ route("ch-admin.addToCart") }}';
        const removeFromCartUrl = '{{ route("ch-admin.removeFromCart") }}';
        const addAddonUrl = '{{ route("ch-admin.addAddon") }}';
        const applyCouponUrl = '{{ route("ch-admin.applyCoupon") }}';
        const removeCouponUrl = '{{ route("ch-admin.removeCoupon") }}';
        const paymentMethods = @json(config('payments_gateway'));
    </script>
    <script src="{{ url('assets/themes/default/js/vue.min.js') }}"></script>
    <script src="{{ url('assets/themes/default/js/axios.min.js') }}"></script>
    <script src="{{ url('assets/themes/default/js/order.js') }}"></script>

@endsection