@extends('fronted.layout.main')
@section('adcontent')
    <style>
        .form-control,
        .form-select {
            font-size: 0.8rem;
        }

        .form-control:focus,
        .form-select:focus {
            box-shadow: none;
        }

        .form-label {
            font-size: 0.8rem;
        }

        .swal-title {
            font-size: 18px;
        }
    </style>
    <div class="container position-relative">
        <div class="toast position-absolute top-0 end-0" id="messagePopUp" role="alert" aria-live="assertive"
            aria-atomic="true">
            <div class="toast-header">
                <strong class="me-auto">Notification</strong>
                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body">
                <h6 class="subscrioptionUpdateMessageText" style="font-size:0.8rem"></h6>
                <div class="mt-2 pt-2 border-top">
                    <a href="{{ route('subscription.details') }}" class="btn btn-warning btn-sm actionBtnAlerBox"></a>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid overflow-y-hidden" style="margin-bottom:2%">
        <div class="container d-flex justify-content-between align-items-center fs-6 g-3">
            <div class="text-start my-1">
                <p class="text-info p-text">Total Room :-<span class="text-warning">{{ $roomnumber }}</span>
                    <i class="bi bi-person-circle"></i>
                </p>
            </div>
            <div class="text-center my-1">
                <p class="text-info  p-text  text-left ">Total Seat :- <span class="text-warning">{{ $totalseats }}</span>
                </p>
            </div>
            <div class=" text-center my-1">
                <p class="text-info  p-text ">Engaged Seat :- <span class="text-warning">{{ $engagedseats }}</span></p>
            </div>
            <div class=" text-center my-1">
                <p class="text-info  p-text ">Vacant:- <span class="text-warning">{{ $vacantSeats }}</span></p>
            </div>
        </div>
        @if (!$subscriptionDetails['status'])
            @if (!isset($subscriptionDetails['purchedSeats']))
                <script>
                    $(document).ready(function() {
                        $(".subscrioptionUpdateMessageText").text("{{ $subscriptionDetails['message'] }}");
                        $(".actionBtnAlerBox").text('Subscribe');
                        setInterval(function() {
                            new bootstrap.Toast($('#messagePopUp')).show();
                        }, 5 * 1000);
                    });
                </script>
            @endif
        @endif

        @if ($message = Session::get('warning'))
            <script>
                Swal.fire({
                    icon: 'success',
                    text: 'Room Seat Updated Successfully',
                })
            </script>
        @endif

        @if ($message = Session::get('SubscriptionAdd'))
            <script>
                Swal.fire({
                    icon: 'success',
                    text: '{{ $message }}',
                })
            </script>
        @endif

        @if ($message = Session::get('danger'))
            <script>
                Swal.fire({
                    icon: 'success',
                    text: '{{ $message }}',
                })
            </script>
        @endif
        @if ($message = Session::get('subscriptionError'))
            <script>
                Swal.fire({
                    icon: 'warning',
                    text: '{{ $message }}',
                    showCancelButton: true,
                    confirmButtonText: 'Upgrade Now',
                    cancelButtonText: 'Cancel',
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Redirect or perform other actions when the confirm button is clicked
                        location.href = "{{ route('subscription.details') }}"

                    }
                });
            </script>
        @endif
        @if (session()->has('roomerror') && session()->has('activeUpgradeBtn'))
            <script>
                Swal.fire({
                    icon: 'warning',
                    text: '{{ session('roomerror') }}',
                    showCancelButton: true,
                    confirmButtonText: 'Upgrade',
                }).then((result) => {
                    if (result.isConfirmed) {
                        window.location.href = '{{ route('subscription.details') }}';
                    }
                });
            </script>
        @elseif(session()->has('roomerror'))
            <script>
                // Display SweetAlert dialog without a confirm button
                Swal.fire({
                    icon: 'warning',
                    text: '{{ session('roomerror') }}',
                });
            </script>
        @endif

        <div class="shadow">
            <div class="table-responsive dataTable">
                <table class="table text-center  mb-4 roomSeatTable">
                    <thead class="align-middle">
                        <tr>
                            <th>Room No</th>
                            <th>Room Type</th>
                            <th>No.Of Seats</th>
                            <th>No. Of Candidate</th>
                            <th>Rent</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody class="align-middle">
                        <form id="createNewRoomForm" method="POST" action="{{ route('roomseat') }}"
                            enctype="multipart/form-data">
                            @csrf
                            <tr>
                                <td class="p-2">
                                    <div class="d-flex justify-content-center flex-column ">
                                        <input class="form-control-sm border-0   text-center" type="text"
                                            value="{{ old('roomno') }}" placeholder="Enter Here" name="roomno"
                                            id="userInputID" required>
                                        <p class="text-danger mb-0">
                                            @error('roomno')
                                                {{ $message }}
                                            @enderror
                                        </p>
                                    </div>
                                </td>
                                <td class="p-2">
                                    <input class="form-control-sm border-0   text-center" type="text"
                                        placeholder="Enter Room Type Here" name="roomtype" value="{{ old('roomtype') }}"
                                        required>
                                    <p class="text-danger mb-0">
                                        @error('roomtype')
                                            {{ $message }}
                                        @enderror
                                    </p>
                                </td>
                                <td class="p-2">
                                    <select class="form-control-sm border-0" name="numberseats" required>
                                        <option value="">Select option</option>
                                                                                <option value="{{ $i }}">{{ $i }}</option>
                                                                                <option value="{{ $i }}">{{ $i }}</option>
                                                                                <option value="{{ $i }}">{{ $i }}</option>
                                                                                <option value="{{ $i }}">{{ $i }}</option>
                                                                                <option value="{{ $i }}">{{ $i }}</option>
                                                                                <option value="{{ $i }}">{{ $i }}</option>
                                                                                <option value="{{ $i }}">{{ $i }}</option>
                                                                            </select>
                                </td>
                                <td class=""><input class="form-control-sm border-0   text-center" type="text"
                                        placeholder="Enter Here" name="nocandidate" value="0" readonly>
                                    <p class="text-danger bg-info mb-0">
                                        @error('nocandidate')
                                            {{ $message }}
                                        @enderror
                                    </p>
                                </td>
                                <td class="p-2"><input class="form-control-sm border-0   text-center" type="number"
                                        placeholder="Enter Here" name="rent" value="{{ old('rent') }}" required>
                                    <p class="text-danger mb-0">
                                        @error('rent')
                                            {{ $message }}
                                        @enderror
                                    </p>
                                </td>
                                <td><button id="CreateNewRoom" class="btn btn-success roombtn btn" data-bs-toggle="tooltip"
                                        data-bs-placement="top" title="Add Room" type="submit">Add Room</button></td>
                            </tr>
                        </form>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="container-fluid shadow p-0">
            <div class="table-responsive dataTable">
                <table class="table text-center mb-4 roomSeatTable" id="example">
                    <thead class="align-middle">
                        <tr>
                            <th>S.N0</th>
                            <th>Room No</th>
                            <th>Room Type</th>
                            <th>No.Of Seats</th>
                            <th>No. Of Candidate</th>
                            <th>Rent</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody class="align-middle text-capitalize">
                        @foreach ($roomData as $index => $temp)
                            <tr>
                                <td>{{ $index + 1 }}</td>
                                <td>{{ $temp->roomno }}</td>
                                <td class="text-capitalize text-start" style="text-indent:30%;">
                                    {{ strtolower($temp->roomtype) }}
                                </td>
                                <td>{{ $temp->numberseats }}</td>
                                <td>{{ $temp->totalActiveInRoom() }}</td>
                                <td class="text-start" style="text-indent:25%">₹ {{ $temp->rent }}</td>
                                <td>
                                    <div class="d-flex gap-2 justify-content-center">
                                        <form action="{{ route('roomseatdelete', $temp->id) }}" method="POST">
                                            @csrf
                                            <input type="hidden" value="DELETE">
                                            <button type="submit" class="btn btn-xs  btn-flat show_confirm"
                                                data-toggle="tooltip" title='Delete'><i
                                                    class="fa fa-trash fa-lg text-danger"></i></button>
                                        </form>
                                        <button type="button" class="btn editbtn" value="{{ $temp->id }}"
                                            data-bs-toggle="modal" data-bs-target="#editModals">
                                            <i class="fa-regular fa-pen-to-square  text-success" data-bs-toggle="tooltips"
                                                data-toggle="tooltips" data-bs-placement="top" title="Edit Room"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        <a type="button" href="{{ route('Roomseat.pdf') }}" class="btn border-none text-success d-block text-center">
            Download pdf
        </a>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="editModals" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">

            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel"> Edit Room Seats</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form method="POST" action="{{ route('roomseatupdate') }}" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" id="roomseats_id" name="roomseats_id">
                        <div class="form-group">
                            <label class="form-label" for="roomno">Room No</label>
                            <input type="text" class="form-control" name="roomno" id="roomno">
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="roomtype">Room Type</label>
                            <input type="text" class="form-control" name="roomtype" id="roomtype">
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="numberseats">No. Of Seats</label>
                            <select class="form-select" name="numberseats" id="numberseats">
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                                <option>6</option>
                                <option>7</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="nocandidate">No. Of Candidate</label>
                            <input type="text" class="form-control txt2" name="nocandidate" id="nocandidate"
                                readonly>
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="rent">Rent</label>
                            <input type="number" class="form-control txt2" name="rent" id="rent">
                        </div>

                        <div class="modal-footer mt-2">
                            <button class="btn btn-warning" type="submit">Save changes</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- final modal for upgrade seats -->
    <div class="modal fade" id="upgradeSeatsInDatabaseModal" data-bs-backdrop="static" data-bs-keyboard="false"
        tabindex="-1" aria-labelledby="upgradeSeatsInDatabaseModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="upgradeSeatsInDatabaseModalLabel">Upgrade Seats</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form action="{{ route('upgarde.seats.post') }}" method="post">
                        @csrf
                        <div class="form-group mb-1">
                            <label class="form-label" for="totalUpgradedSeats">Total Seats</label>
                            <input class="form-control" type="number" id="totalUpgradedSeats" name="totalSeats"
                                readonly>
                        </div>
                        <div class="form-group mb-1">
                            <label for="totalUpgradeAmount" class="form-label">Total Amount</label>
                            <input type="number" min="1" class="form-control" id="totalUpgradeAmount"
                                name="totalAmount" readonly>
                        </div>
                        <div class="form-group mb-1">
                            <label for="remaningUpgradedAmount" class="form-label">Remaning Amount</label>
                            <input type="number" min="1" class="form-control" id="remaningUpgradedAmount"
                                readonly>
                        </div>
                        <div class="form-group mb-1">
                            <label for="payAbleAmountForUpgrade" class="form-label">Payble Amount</label>
                            <input type="number" class="form-control" id="payAbleAmountForUpgrade" readonly>
                        </div>
                        <button class="btn btn-warning btn-sm" type="submit">Upgrade</button>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal"
                        aria-label="Close">Close</button>

                </div>
            </div>
        </div>
    </div>
    <!-- final modal for upgrade seats close -->
    </div>

    <script>
        $(document).ready(function() {
            function upgradeSeatsToDatabase(currentSeats) {
                $.ajax({
                    type: "get",
                    url: "{{ route('caluculate.for.seat.update') }}",
                    data: {
                        'upgradeSeats': parseInt(currentSeats),
                    },
                    success: function(response) {
                        console.log(response);
                        // now open new modal  to add seats into database
                        var totalUpgradedSeats = response.totalUpgradedSeats;
                        var totalUpgradeAmount = response.totalUpgradeAmount;
                        var remaningUpgradedAmount = response.remaningUpgradedAmount;
                        var payAbleAmountForUpgrade = response.payAbleAmountForUpgrade;

                        $("#upgradeSeatsInDatabaseModal").on('show.bs.modal', function() {
                            $("#totalUpgradedSeats").val(totalUpgradedSeats);
                            $("#totalUpgradeAmount").val(totalUpgradeAmount);
                            $("#remaningUpgradedAmount").val(remaningUpgradedAmount);
                            $("#payAbleAmountForUpgrade").val(payAbleAmountForUpgrade);
                        }).modal("show");
                    },
                    error: function(error) {
                        // console.log(error);
                    }
                });
            }

            $("#getValBtnID").click(function() {
                var inputString = $("#userInputID").val();
                alert(inputString);
            });
            $("#upgradeSeatBtn").on("click", function() {
                localStorage.setItem('upgradeSeats', true);
                handleSelectionChange();
                $("#additionalplanModal").modal('show');
            });
            $("#upgradeSeatValueBtn").click(function() {
                var numberOfAddedSeats = parseInt($("#upgradeSeats").val());
                var currentSeats = parseInt("{{ $totalseats }}");
                if (isNaN(numberOfAddedSeats) || numberOfAddedSeats <= 0) {
                    alert("Invalid Seats");
                } else {
                    upgradeSeatsToDatabase(numberOfAddedSeats);
                }
            });
            $("#upgradePlanBtn").click(function() {
                localStorage.setItem('upgradePlan', true);
                localStorage.setItem('upgradeSeats', false);
                handleSelectionChange();
                $("#additionalplanModal").modal('show');

            })
        });
    </script>
    <script>
        $(document).ready(function() {
            $(document).on('click', '.editbtn', function() {
                var roomseats_id = $(this).val();
                // alert(roomseats_id);
                $('editModal').modal('show');
                $.ajax({
                    type: 'GET',
                    url: 'roomseatedit/' + roomseats_id,
                    success: function(response) {
                        $('#roomno').val(response.roomseats.roomno);
                        $('#roomtype').val(response.roomseats.roomtype);
                        $('#numberseats').val(response.roomseats.numberseats);
                        $('#nocandidate').val(response.roomseats.nocandidate);
                        $('#rent').val(response.roomseats.rent);
                        $('#roomseats_id').val(roomseats_id);
                    }
                });
            });
        });
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.0/sweetalert.min.js"></script>
    <script type="text/javascript">
        $('.show_confirm').click(function(event) {
            var form = $(this).closest("form");
            var name = $(this).data("name");
            event.preventDefault();
            swal({
                    title: `Are you sure you want to delete this record?`,
                    text: "If you delete this, it will be gone forever.",
                    icon: "warning",
                    buttons: true,
                    dangerMode: true,
                })
                .then((willDelete) => {
                    if (willDelete) {
                        form.submit();
                    }
                });
        });
    </script>
    <!-- <script>
        $(document).ready(function() {
            $.ajax({
                type: "get",
                url: "{{ route('get.parchases.seats') }}",
                success: function(response) {
                    $parchesesSeats = response.parchesesSeats;
                    $totalRegister = response.totalRegisterSeats;
                    if ($parchesesSeats <= $totalRegister) {
                        $("#alertBox").removeClass('d-none');
                        $("#seatNotAvailableAlert").html('Your subscription (' + response.package_type +
                            ' - ' + response.purchaseDate +
                            ') does not allow to create new room because your purchased seats are not sufficient. <a href="#" onclick ="handleSelectionChange()" data-bs-toggle="modal" data-bs-target="#additionalplanModal">Please upgrade your subscription</a>'
                        );
                    }
                },
                error: function(error) {
                    alert('somthing wronge');
                }
            });
        });
    </script> -->
@endsection