@extends('layouts/contentLayoutMaster')

@section('title', 'Edit 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 - Edit 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($order) && $order != '[]' &&
                $order != null)
                <form action="{{ route('voucher-order-edit') }}" method="POST">
                    @csrf
                    <input type="hidden" name="id" value="{{ $order->id }}">
                    <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($order->gift_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>
                            <div>
                                <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">
                                                    {{ ucwords($order->member->first_name).' '.ucwords($order->member->last_name) }}
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="font-weight-bold">Email:</td>
                                                <td id="email" class="pl-1">{{ $order->member->email }}</td>
                                            </tr>
                                            <tr>
                                                <td class="font-weight-bold">Contact Number:</td>
                                                <td id="contact_number" class="pl-1">
                                                    {{ $order->member->contact_number }}</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" required name="quantity"
                                class="form-control @error('quantity') is-invalid @enderror" id="quantity"
                                value="{{ $order->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($order->payment_status == 'pending') selected @endif>Pending
                                </option>
                                <option value="success" @if($order->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="save" class="font-medium-2"></i>&nbsp;Save Changes
                            </button>
                        </div>
                    </div>
                </form>
                @else
                <div class="alert alert-warning alert-dismissible fade show p-1 m-1 text-center" role="alert">
                    Can not find this voucher 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>
    updateVoucher();
    $('body').on('change', '#voucher', function () {
        updateVoucher();
    });

    function updateVoucher() {
        var Id = $('#voucher').val();
        let _token = '{{ csrf_token() }}';
        $.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');
                }
                document.getElementById('flavor').innerText = response.flavor;
                document.getElementById('price').innerHTML = '&euro;' + response.price;
                document.getElementById('discount').innerHTML = Number(response.discount) > 0 ? '&euro;' +
                    response.discount : "No discount";
                document.getElementById('availability').innerText = Number(response.quantity) > 0 ? response
                    .quantity : 0;
                document.getElementById('description').innerText = response.description;
                $("#voucherDetails").removeClass("hidden");
            }

        });
    }
</script>
@endsection