@extends('layouts/contentLayoutMaster')

@section('title', 'Edit Booking')

@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">
                    Programs - Edit Booking
                </h4>
                <a role="button" class="btn btn-secondary " href="{{ route('booking-cancel') }}">
                    <i data-feather="corner-up-left" class="font-medium-2"></i>&nbsp;Back
                </a>
            </div>
            <div class="card-body">
                @if(isset($booking) && $booking != '[]' && $booking != null && isset($experiences) && $experiences !=
                '[]' && $experiences != null && isset($member) && $member != '[]' && $member != null)
                <input type="hidden" id="experience_id" value="{{ $booking->experience_id }}">

                <form action="{{ route('booking-edit') }}" method="POST">
                    <input type="hidden" id="id" name="id" value="{{ $booking->id }}">
                    @csrf
                    <div class="row">
                        <div class="col-12 col-lg-6 col-sm-6 mt-1">
                            <label for="program" class="font-medium-1"><span
                                    class="text-warning">*&nbsp;</span>Experience:</label>
                            <select class="custom-select select2 @error('experience') is-invalid @enderror"
                                id="experience" required name="experience_id">
                                <option selected disabled>Select Experience</option>
                                @foreach($experiences as $experience)
                                <option value="{{ $experience->id }}" @if($experience->id == $booking->experience_id)
                                    selected @endif>{{ ucwords($experience->name) }}</option>
                                @endforeach
                            </select>
                            @error('experience')
                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>
                            @enderror
                            <div id="experienceDetails" class="hidden">
                                <div class="table-responsive mt-1">
                                    <table class="table border">
                                        <tbody>
                                            <tr>
                                                <td class="font-weight-bold">Price:</td>
                                                <td id="price" class="pl-1"></td>
                                            </tr>
                                            <tr>
                                                <td class="font-weight-bold">Date:</td>
                                                <td id="date" class="pl-1"></td>
                                            </tr>
                                            @isset($time)
                                            <tr id="availableDuration">
                                                <td class="font-weight-bold">Duration:</td>
                                                <td class="pl-1"> {{ $time->start_time. ' to '. $time->end_time }}</td>
                                            </tr>
                                            @endisset
                                        </tbody>
                                    </table>

                                </div>

                                <div class="mt-1">Change duration to:</div>
                                <div class="">
                                    <select class="custom-select select2" name="time_id" id="duration">
                                        <option value="">Select Duration</option>
                                    </select>
                                </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 class="table-responsive">
                                <table class="table border">
                                    <tbody>
                                        <tr>
                                            <td class="font-weight-bold">Name:</td>
                                            <td id="name" class="pl-1">
                                                {{ ucfirst($member->first_name).' '.ucfirst($member->last_name) }}</td>
                                        </tr>
                                        <tr>
                                            <td class="font-weight-bold">Email:</td>
                                            <td id="email" class="pl-1">{{ $member->email }}</td>
                                        </tr>
                                        <tr>
                                            <td class="font-weight-bold">Contact Number:</td>
                                            <td id="contact_number" class="pl-1">{{ $member->contact_number }}</td>
                                        </tr>
                                    </tbody>
                                </table>

                            </div>

                        </div>

                        <div class="col-12 col-lg-6 col-sm-6 mt-1">
                            <label for="booking-name" class="font-medium-1"><span
                                    class="text-warning">*&nbsp;</span>Booking Name: </label>
                            <input type="text" class="form-control" placeholder="Booking Name" disabled
                                value="{{ ucwords($booking->name) }}">
                        </div>



                        <div class="col-12 col-lg-6 col-sm-6 mt-1">
                            <label for="booking-contact-person" class="font-medium-1"><span
                                    class="text-warning">*&nbsp;</span>Contact Person Name: </label>
                            <input type="text" class="form-control" placeholder="Contact Person Name" disabled
                                value="{{ ucwords($booking->contact_name) }}">
                        </div>

                        <div class="col-12 col-lg-6 col-sm-6 mt-1">
                            <label for="booking-email" class="font-medium-1"><span
                                    class="text-warning">*&nbsp;</span>Email: </label>
                            <input type="email" class="form-control" placeholder="Email" disabled
                                value="{{ lcfirst($booking->email) }}">
                        </div>

                        <div class="col-12 col-lg-6 col-sm-6 mt-1">
                            <label for="booking-tel" class="font-medium-1"><span
                                    class="text-warning">*&nbsp;</span>Contact Number: </label>
                            <input type="tel" class="form-control" placeholder="Contact Number" disabled
                                value="{{ ucwords($booking->contact_number) }}">
                        </div>
                        <div class="col-12 col-lg-6 col-sm-6 mt-1">
                            <label for="booking-no-guests" class="font-medium-1">No Of Guests: </label>
                            <input type="number" min="0" class="form-control  @error('guests') is-invalid @enderror"
                                placeholder="No Of Guests" name="guests" value="{{ ucwords($booking->no_of_guests) }}">
                            @error('guests')
                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>
                            @enderror
                        </div>


                        <div class="ol-12 col-lg-6 col-sm-6 mt-1">
                            <label for="payment-status" class="font-medium-1">Payment Status:</label>
                            <select class="custom-select select2  @error('payment_status') is-invalid @enderror"
                                id="payment" name="payment_status" required>
                                <option value="">Select Payment Status</option>
                                <option value="pending" @if($booking->payment_status == 'pending') selected
                                    @endif>Pending</option>
                                <option value="success" @if($booking->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">
                    Please add experience before booking...!
                </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 () {
        updateExperience();
        // updateMember();
    });
    $('body').on('change', '#experience', function () {
        updateExperience();
    });
    // $('body').on('change', '#member', function() {
    //     updateMember();
    // });
    function updateExperience() {
        var Id = $('#experience').val();
        let _token = '{{ csrf_token() }}';
        $.ajax({
            url: "{{ route('get-experience') }}",
            type: "POST",
            data: {
                id: Id,
                _token: _token,
            },
            success: function (response) {
                if (response === 'error') {
                    showMessage("Experience can not found", 'Warning', 'warning');
                }
                document.getElementById('date').innerText = '';
                document.getElementById('price').innerText = '';
                document.getElementById('date').innerText = response.date;
                document.getElementById('price').innerText = '$' + response.price;
                $("#experienceDetails").removeClass("hidden");
                if (Number(document.getElementById('experience_id').value) !== Number(response.id)) {
                    document.getElementById('availableDuration').style.display = 'none';
                } else {
                    document.getElementById('availableDuration').style.display = '';

                }
                updateExperienceTime(Id);




            }

        });
    }

    function updateExperienceTime(id) {

        var Id = id;
        let _token = '{{ csrf_token() }}';
        $.ajax({
            url: "{{ route('get-experience-times') }}",
            type: "POST",
            data: {
                id: Id,
                _token: _token,
            },
            success: function (response) {
                if (response === 'error') {
                    showMessage("Experience can not found", 'Warning', 'warning');
                }
                if (response.length <= 0) {
                    document.getElementById('duration').innerHTML = '';
                    var row = '<option value=""> Sorry...! All Durations Booked...!</option>';
                    $('#duration').append(row);
                    document.getElementById('duration').disabled = true;

                } else {
                    document.getElementById('duration').disabled = false;
                    document.getElementById('duration').innerHTML = '';
                    var row = '<option value=""> Select Time Duration</option>';
                    $('#duration').append(row);
                    $.each(response, function (index, value) {

                        var row = '<option value="' + value.id + '">' + value.start_time + ' to ' +
                            value.end_time + '</option>';
                        $('#duration').append(row);
                    });
                }


                $("#experienceDetails").removeClass("hidden");
            }

        });
    } {
        {
            -- function updateMember() {
                --
            }
        } {
            {
                --
                var Id = $('#member').val();
                --
            }
        } {
            {
                --
                let _token = '{{ csrf_token() }}';
                --
            }
        } {
            {
                --$.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');
                                --
                            }
                        } {
                            {
                                --
                            }--
                        }
                    } {
                        {
                            --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