@extends('layouts/contentLayoutMaster')

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

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

@section('page-style')
{{-- Page Css files --}}
<link rel="stylesheet" href="{{ asset(mix('admin/css/base/plugins/forms/form-validation.css')) }}">
<link rel="stylesheet" href="{{ asset(mix('admin/css/base/pages/app-user.css')) }}">
<link rel="stylesheet" href="{{ asset(mix('admin/css/base/plugins/extensions/ext-component-toastr.css')) }}">
@endsection
<script>
    function showMessage(message, title, status) {
        setTimeout(function () {
            toastr[status](
                message,
                title, {
                    closeButton: true,
                    tapToDismiss: false
                }
            );
        }, 2000);
    }
</script>
@section('content')
@if(session()->has('success'))
<script>
    showMessage("{{session()->get('success')}}", 'Success', 'success');
</script>
@endif
@if(session()->has('error'))
<script>
    showMessage("{{session()->get('error')}}", 'Warning', 'warning');
</script>
@endif
<section>
    <div class="col-lg-12 col-12 p-0">
        <div class="card card-company-table">
            <div class="card-header pb-0">
                <h4 class="card-title">
                    Orders - Add Voucher Order
                </h4>
                <a role="button" class="btn btn-secondary " href="{{ route('voucher-order-cancel') }}">
                    <i data-feather="corner-up-left" class="font-medium-2"></i>&nbsp;Back
                </a>
            </div>
            <div class="card-body">
                @if(isset($vouchers) && $vouchers != '[]' && $vouchers != null && isset($members) && $members != '[]' &&
                $members != null)
                <form action="{{ route('voucher-order-add') }}" method="POST">
                    @csrf
                    <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>Gift Voucher:</label>
                            <select class="custom-select select2 @error('voucher') is-invalid @enderror" id="voucher"
                                required name="voucher_id">
                                <option value="">Select Gift Voucher</option>
                                @foreach($vouchers as $voucher)
                                <option value="{{ $voucher->id }}" @if(session()->getOldInput('voucher_id') ==
                                    $voucher->id) selected @endif>{{ ucwords($voucher->name) }}</option>
                                @endforeach
                            </select>
                            @error('voucher')
                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>
                            @enderror
                            <div id="voucherDetails" class="hidden">
                                <div class="table-responsive mt-1">
                                    <table class="table border">
                                        <tbody>
                                            <tr>
                                                <td class="font-weight-bold">Flavor:</td>
                                                <td id="flavor" class="pl-1"></td>
                                            </tr>
                                            <tr>
                                                <td class="font-weight-bold">price:</td>
                                                <td id="price" class="pl-1"></td>
                                            </tr>
                                            <tr>
                                                <td class="font-weight-bold">Discount:</td>
                                                <td id="discount" class="pl-1"></td>
                                            </tr>
                                            <tr>
                                                <td class="font-weight-bold">Availability:</td>
                                                <td id="availability" class="pl-1"></td>
                                            </tr>
                                            <tr>
                                                <td class="font-weight-bold">Description:</td>
                                                <td id="description" class="pl-1"></td>
                                            </tr>
                                        </tbody>
                                    </table>

                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-lg-6 col-sm-6 mt-1">
                            <label for="member" class="font-medium-1"><span
                                    class="text-warning">*&nbsp;</span>Member:</label>
                            <select class="custom-select select2 @error('member') is-invalid @enderror" id="member"
                                required name="member_id">
                                <option value="">Select Member</option>
                                @foreach($members as $member)
                                <option value="{{ $member->id }}" @if(session()->getOldInput('member_id') ==
                                    $member->id) selected
                                    @endif>{{ ucwords($member->first_name.' '.$member->last_name) }}</option>
                                @endforeach
                            </select>
                            @error('member')
                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>
                            @enderror
                            <div id="memberDetails" class="hidden">
                                <div class="table-responsive mt-1">
                                    <table class="table border">
                                        <tbody>
                                            <tr>
                                                <td class="font-weight-bold">Name:</td>
                                                <td id="name" class="pl-1"></td>
                                            </tr>
                                            <tr>
                                                <td class="font-weight-bold">Email:</td>
                                                <td id="email" class="pl-1"></td>
                                            </tr>
                                            <tr>
                                                <td class="font-weight-bold">Contact Number:</td>
                                                <td id="contact_number" class="pl-1"></td>
                                            </tr>
                                            <tr>
                                                <td class="font-weight-bold">Date of Birth:</td>
                                                <td id="dob" class="pl-1"></td>
                                            </tr>
                                            <tr>
                                                <td class="font-weight-bold">Country:</td>
                                                <td id="country" class="pl-1"></td>
                                            </tr>
                                            <tr>
                                                <td class="font-weight-bold">City:</td>
                                                <td id="city" class="pl-1"></td>
                                            </tr>
                                        </tbody>
                                    </table>

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

                        <div class=" col-12 col-lg-6 col-sm-6 mt-1">
                            <label class="font-medium-1"><span class="text-warning">*&nbsp;</span>Quantity:</label>
                            <input type="number" min="1" placeholder="Quantity" required name="quantity"
                                value="{{ session()->getOldInput('quantity') }}"
                                class="form-control @error('quantity') is-invalid @enderror" id="quantity">
                            @error('quantity')
                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>
                            @enderror
                        </div>

                        <div class=" col-12 col-lg-6 col-sm-6 mt-1">
                            <label for="payment-status" class="font-medium-1"><span
                                    class="text-warning">*&nbsp;</span>Payment Status:</label>
                            <select class="custom-select select2 @error('payment_status') invalid @enderror"
                                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>
                            @error('payment_status')
                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>
                            @enderror
                        </div>

                        <div class="justify-content-between col-12 mt-2">
                            <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 Voucher Order
                            </button>
                        </div>
                    </div>
                </form>
                @else
                <div class="alert alert-warning alert-dismissible fade show p-1 m-1 text-center" role="alert">
                    Please add gift vouchers and members before order...!
                </div>
                @endif
            </div>
        </div>
    </div>
</section>
@endsection
@section('vendor-script')
{{-- vendor files --}}
<script src="{{ asset(mix('admin/vendors/js/tables/datatable/jquery.dataTables.min.js')) }}"></script>
<script src="{{ asset(mix('admin/vendors/js/tables/datatable/datatables.bootstrap4.min.js')) }}"></script>
<script src="{{ asset(mix('admin/vendors/js/tables/datatable/dataTables.responsive.min.js')) }}"></script>
<script src="{{ asset(mix('admin/vendors/js/tables/datatable/responsive.bootstrap4.js')) }}"></script>
<script src="{{ asset(mix('admin/vendors/js/tables/datatable/datatables.checkboxes.min.js')) }}"></script>
<script src="{{ asset(mix('admin/vendors/js/tables/datatable/datatables.buttons.min.js')) }}"></script>
<script src="{{ asset(mix('admin/vendors/js/tables/datatable/buttons.bootstrap4.min.js')) }}"></script>
<script src="{{ asset(mix('admin/vendors/js/tables/datatable/jszip.min.js')) }}"></script>
<script src="{{ asset(mix('admin/vendors/js/tables/datatable/pdfmake.min.js')) }}"></script>
<script src="{{ asset(mix('admin/vendors/js/tables/datatable/vfs_fonts.js')) }}"></script>
<script src="{{ asset(mix('admin/vendors/js/tables/datatable/buttons.html5.min.js')) }}"></script>
<script src="{{ asset(mix('admin/vendors/js/tables/datatable/buttons.print.min.js')) }}"></script>
<script src="{{ asset(mix('admin/vendors/js/tables/datatable/dataTables.rowGroup.min.js')) }}"></script>
<script src="{{ asset(mix('admin/vendors/js/pickers/flatpickr/flatpickr.min.js')) }}"></script>
<script src="{{ asset('admin/js/sweetalert/sweetalert.all.min.js') }}"></script>
<script src="{{ asset(mix('admin/vendors/js/extensions/toastr.min.js')) }}"></script>
<script src="{{ asset(mix('admin/vendors/js/forms/select/select2.full.min.js')) }}"></script>
@endsection
@section('page-script')
<script src="{{ asset(mix('admin/js/scripts/forms/form-select2.js')) }}"></script>
<script>
    $(document).ready(function () {
        updateVoucher();
        updateMember();
    });
    $('body').on('change', '#voucher', function () {
        updateVoucher();
    });
    $('body').on('change', '#member', function () {
        updateMember();
    });

    function updateVoucher() {

        var Id = $('#voucher').val();
        let _token = '{{ csrf_token() }}';
        if (Id !== null) {
            $.ajax({
                url: "{{ route('get-voucher') }}",
                type: "POST",
                data: {
                    id: Id,
                    _token: _token,
                },
                success: function (response) {
                    if (response === 'error') {
                        // showMessage("Gift Voucher can not found",'Warning','warning');
                    } else {
                        document.getElementById('flavor').innerText = response.flavor;
                        document.getElementById('price').innerText = '$' + response.price;
                        document.getElementById('discount').innerText = Number(response.discount) > 0 ?
                            '$' + response.discount : "No discount";
                        document.getElementById('availability').innerText = response.quantity;
                        document.getElementById('description').innerText = response.description;
                        $("#voucherDetails").removeClass("hidden");
                    }

                    // console.log(response);
                }

            });

        }
    }

    function updateMember() {
        var Id = $('#member').val();
        let _token = '{{ csrf_token() }}';
        if (Id !== null) {
            $.ajax({
                url: "{{ route('get-member') }}",
                type: "POST",
                data: {
                    id: Id,
                    _token: _token,
                },
                success: function (response) {
                    if (response === 'error') {
                        // showMessage("Gift Voucher can not found",'Warning','warning');
                    } else {
                        document.getElementById('name').innerText = response.first_name + ' ' + response
                            .last_name;
                        document.getElementById('email').innerText = response.email;
                        document.getElementById('contact_number').innerText = response.contact_number;
                        document.getElementById('dob').innerText = response.date_of_birth;
                        document.getElementById('country').innerText = response.country_name;
                        document.getElementById('city').innerText = response.city_name;
                        $("#memberDetails").removeClass("hidden");
                    }

                }

            });
        }
    }
</script>

@endsection