@extends('layouts.master')

@section('title', 'Edit Class Room Setup Edit Page')
@section('content_title', __('Academic.Class Room Setup Edit'))

@section('content_summary', 'Class Room Setup Edit Summury')

@push('style')
<style>
    .classroom-container {
        display: flex;
        flex-direction: column;
        width: fit-content;
        margin: 20px;
    }
    .row-container {
        display: flex;
    }
    .bench {
        width: 40px;
        height: 40px;
        margin: 5px;
        background-color: #4CAF50;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: bold;
        border-radius: 5px;
    }
</style>
@endpush

@section('main_content')

{{-- error messages --}}
<div>
    @if (session('room_error'))
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                Swal.fire({
                    icon: 'warning',
                    title: 'Room Error !!',
                    text: '{{ session('room_error') }}',
                    confirmButtonText: 'OK'
                });
            });
        </script>
    @endif

    @if (session('one'))
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                Swal.fire({
                    icon: 'warning',
                    title: 'Check Capacity !',
                    text: '{{ session('one') }}',
                    confirmButtonText: 'OK'
                });
            });
        </script>
    @endif

    @if (session('two'))
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                Swal.fire({
                    icon: 'warning',
                    title: 'Check Capacity !',
                    text: '{{ session('two') }}',
                    confirmButtonText: 'OK'
                });
            });
        </script>
    @endif
</div>

<div class="position-relative mb-3 card">
   <div class="card-body">
     <form id="editSubmit" action="{{ route('academic.class_rooms_setup.update', $roomSetup->id) }}"method="POST" onsubmit="clearVisualization()">
        @csrf
        <div class="row">
            <!-- First Column -->
            <div class="col-md-6">
                <div class="form-group position-relative mb-3">
                    <label for="">Business id</label>
                    <select class="form-control" name="business_id">
                        @foreach ($businesses as $business)
                        <option value="{{ $business->id }}"{{ $roomSetup->business_id == $business->id ? 'selected' : '' }}>{{ $business->id }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group position-relative mb-3">
                    <label for="classRoom">Select a Class Room:</label>
                    <select class="form-control" id="classRoom" onchange="updateMaxCapacity()" name="class_room_id">
                        <option value="">- Select Class Room -</option>
                        @foreach ($classRooms as $classRoom)
                        <option value="{{ $classRoom->id }}" data-capacity="{{ $classRoom->max_capacity }}" {{ $roomSetup->class_room_id == $classRoom->id ? 'selected' : '' }}>
                            {{ $classRoom->class_room_name }}
                        </option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group position-relative mb-3">
                    <label for="max_capacity">Max Capacity</label>
                    <input class="form-control" type="text" id="maxCapacity" disabled value="{{ $roomSetup->classRoom->max_capacity }}">
                </div>
                <div class="form-group position-relative mb-3">
                    <label for="">Class Room Column</label>
                    <input type="number" class="form-control" name="room_column" id="roomColumn" required value="{{ $roomSetup->class_room_column }}" oninput="visualizeLayout()">
                </div>
            </div>

            <!-- Second Column -->
            <div class="col-md-6">
                <div class="form-group position-relative mb-3">
                    <label for="">Class room Row</label>
                    <input type="number" class="form-control" name="room_row" id="roomRow" required value="{{ $roomSetup->class_room_row }}" oninput="visualizeLayout()">
                </div>
                <div class="form-group position-relative mb-3">
                    <label for="seatsPerColumn">Seats per Column</label>
                    <input class="form-control" type="number" id="seatsPerColumn" name="seat_per_column" value="{{ $roomSetup->seat_per_column }}" oninput="visualizeLayout()">
                </div>
                <div class="form-group position-relative mb-3">
                    <label for="seatsPerRow">Seats per Row</label>
                    <input class="form-control" type="number" id="seatsPerRow" name="seat_per_row" value="{{ $roomSetup->seat_per_row }}" oninput="visualizeLayout()">
                </div>

                <div class="form-group position-relative mb-3">
                    <label for="note">Note</label>
                    <input class="form-control" type="text" name="note" value="{{ $roomSetup->note }}">
                </div>

                <!-- Additional fields here -->

                <div class="form-group position-relative mb-3">
                    <input type="checkbox" name="is_active" value="1" {{ $roomSetup->status == '1' ? 'checked' : '' }}>
                    <label for="is_active">Active Layout</label>
                </div>

            </div>
        </div>

        <div id="classroom-visualization" class="classroom-container"></div>

        <!-- Submit Button -->
        <div class="position-relative mb-3">
            <div class="col-md-12 text-right">
                <button type="submit" class="btn btn-primary">Update</button>
            </div>
        </div>
    </form>
   </div>
</div>

@endsection

@push('script')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        handleSeatsInput();
        visualizeLayout();
    });

    function updateMaxCapacity() {
        var selectedClassRoom = document.getElementById('classRoom').selectedOptions[0];
        var maxCapacity = selectedClassRoom.getAttribute('data-capacity');
        document.getElementById('maxCapacity').value = maxCapacity;
    }

    function handleSeatsInput() {
        var seatsPerColumn = document.getElementById('seatsPerColumn');
        var seatsPerRow = document.getElementById('seatsPerRow');

        if (seatsPerColumn.value > 0) {
            seatsPerRow.value = 0;
            seatsPerRow.disabled = true;
        } else {
            seatsPerRow.disabled = false;
        }

        if (seatsPerRow.value > 0) {
            seatsPerColumn.value = 0;
            seatsPerColumn.disabled = true;
        } else {
            seatsPerColumn.disabled = false;
        }
    }

    document.getElementById('seatsPerColumn').addEventListener('input', handleSeatsInput);
    document.getElementById('seatsPerRow').addEventListener('input', handleSeatsInput);

    // extra code end
        function visualizeLayout() {
        const row = parseInt(document.getElementById('roomRow').value) || 0;
        const column = parseInt(document.getElementById('roomColumn').value) || 0;
        const seatsPerRow = parseInt(document.getElementById('seatsPerRow').value);
        const seatsPerColumn = parseInt(document.getElementById('seatsPerColumn').value);
        const maxCapacity = parseInt(document.getElementById('maxCapacity').value);

        let totalSeats = 0;
        let rows = 0;
        let cols = 0;

        if (!isNaN(seatsPerRow) && seatsPerRow > 0) {
            totalSeats = column * seatsPerRow;
            rows = seatsPerRow;
            cols = column;
        } else if (!isNaN(seatsPerColumn) && seatsPerColumn > 0) {
            totalSeats = row * seatsPerColumn;
            rows = row;
            cols = seatsPerColumn;
        }

        const classroomVisualization = document.getElementById('classroom-visualization');
        classroomVisualization.innerHTML = '';

        // Validate if totalSeats exceed maxCapacity
        if (totalSeats > maxCapacity) {
            // Swal.fire({
            //     icon: 'warning',
            //     title: 'Capacity Exceeded!',
            //     text: `Total seats (${totalSeats}) exceed the maximum capacity of ${maxCapacity}. Please adjust the values.`,
            //     confirmButtonText: 'OK'
            // });
            alert("Max Capacity Exceeds !!")
            return; // Stop further execution
        }

        if (rows > 0 && cols > 0) {
            for (let r = 0; r < rows; r++) {
                const rowContainer = document.createElement('div');
                rowContainer.classList.add('row-container');
                for (let c = 0; c < cols; c++) {
                    const bench = document.createElement('div');
                    bench.className = 'bench';
                    rowContainer.appendChild(bench);
                }
                classroomVisualization.appendChild(rowContainer);
            }
        }
    }

    function clearVisualization() {
        document.getElementById('classroom-visualization').innerHTML = '';
    }
</script>
@endpush