@extends('layouts/contentLayoutMaster')

@section('title', 'Add 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 - Add 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($experiences) && $experiences != '[]' && $experiences != null && isset($members) && $members
                != '[]' && $members != null)
                <form action="{{ route('booking-add') }}" method="POST">
                    @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="id">
                                <option value="">Select Experience</option>
                                @foreach($experiences as $experience)
                                <option value="{{ $experience->id }}" @if(session()->getOldInput('experience') ==
                                    $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>

                                        </tbody>
                                    </table>

                                </div>

                                <div class="mt-1">Duration:</div>
                                <div class="">
                                    <select class="custom-select select2" required 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>
                            <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') == $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 for="booking-name" class="font-medium-1"><span
                                    class="text-warning">*&nbsp;</span>Booking Name: </label>
                            <input type="text" class="form-control  @error('name') is-invalid @enderror"
                                placeholder="Booking Name" name="name" value="{{ session()->getOldInput('name') }}"
                                required>
                            @error('name')
                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>
                            @enderror
                        </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  @error('contact_name') is-invalid @enderror"
                                placeholder="Contact Person Name" required name="contact_name"
                                value="{{ session()->getOldInput('contact_name') }}">
                            @error('contact_name')
                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>
                            @enderror
                        </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="{{ session()->getOldInput('guests') }}">
                            @error('guests')
                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>
                            @enderror
                        </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 @error('email') is-invalid @enderror"
                                placeholder="Email" name="email" required value="{{ session()->getOldInput('email') }}">
                            @error('email')
                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>
                            @enderror
                        </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 @error('contact_number') is-invalid @enderror"
                                placeholder="Contact Number" name="contact_number"
                                value="{{ session()->getOldInput('contact_number') }}" required>
                            @error('contact_number')
                            <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(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>


                    <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 Booking
                        </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>
    $('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 = response.date;
                document.getElementById('price').innerText = '$' + response.price;
                // $("#experienceDetails").removeClass("hidden");

                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').innerHTML = '';
                    document.getElementById('duration').disabled = false;
                    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