@include('layouts.header', ['title' => isset($inventory) ? 'Edit Inventory' : 'Add Inventory'])
<div class="wrapper">
    @include('layouts.navbar')
    @include('layouts.sidebar')

    <div class="content-page">
        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box">
                            <div class="page-title-right"></div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-9">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="page-title">{{ isset($inventory) ? 'Edit' : 'Add' }} Inventory</h4>
                            </div>

                            <form id="inventoryForm"
                                action="{{ isset($inventory) ? route('admin.inventory.update', $inventory->inventory_location_building_id) : route('admin.inventory.store') }}"
                                method="POST" enctype="multipart/form-data">
                                @csrf
                                @if (isset($inventory))
                                    @method('PUT')
                                @endif

                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="mb-3">
                                                <label for="location" class="form-label">Location <span
                                                        class="text-danger">*</span></label>
                                                <input type="text" id="location" name="location"
                                                    class="form-control @error('location') is-invalid @enderror"
                                                    placeholder="Enter Location"
                                                    value="{{ old('location', $inventory->location ?? '') }}" required>
                                                @error('location')
                                                    <div class="invalid-feedback">
                                                        {{ $message }}
                                                    </div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="mb-3">
                                                <label for="building_no" class="form-label">Building No <span
                                                        class="text-danger">*</span></label>
                                                <input type="text" id="building_no" name="building_no"
                                                    class="form-control @error('building_no') is-invalid @enderror"
                                                    placeholder="Enter Building No"
                                                    value="{{ old('building_no', $inventory->building->building_no ?? '') }}"
                                                    required>
                                                @error('building_no')
                                                    <div class="invalid-feedback">
                                                        {{ $message }}
                                                    </div>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="mb-3">
                                                <label for="building_name" class="form-label">Building Name <span
                                                        class="text-danger">*</span></label>
                                                <input type="text" id="building_name" name="building_name"
                                                    class="form-control @error('building_name') is-invalid @enderror"
                                                    placeholder="Enter Building Name"
                                                    value="{{ old('building_name', $inventory->building->building_name ?? '') }}"
                                                    required>
                                                @error('building_name')
                                                    <div class="invalid-feedback">
                                                        {{ $message }}
                                                    </div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>

                                    <div class="card border-primary border">
                                        <div class="card-body">
                                            <div class="table-responsive-sm">
                                                <table class="table table-bordered table-centered mb-0">
                                                    <thead>
                                                        <tr>
                                                            <th>Wing</th>
                                                            <th>Floor</th>
                                                            <th>Room Number</th>
                                                            <th>Room Type</th>
                                                            <th>Carpet Area in Sq. Metres</th>
                                                            <th>Action</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody id="roomTableBody">
                                                        @if (isset($inventory) && $inventory->building && count($inventory->building->rooms))
                                                            @foreach ($inventory->building->rooms as $index => $room)
                                                                <tr>
                                                                    <td>
                                                                        <input type="text"
                                                                            name="rooms[{{ $index }}][wing_name]"
                                                                            class="form-control"
                                                                            value="{{ old("rooms.$index.wing_name", $room->wing_name) }}"
                                                                        >
                                                                    </td>
                                                                    <td>
                                                                        <select
                                                                            name="rooms[{{ $index }}][floor_no]"
                                                                            class="form-select" required style="min-width: 80px; max-width: 150px; padding-right: 10px;">
                                                                            <option value="G"
                                                                                {{ old("rooms.$index.floor_no", $room->floor_no) == 'G' ? 'selected' : '' }}>
                                                                                G</option>
                                                                            @for ($i = 1; $i <= 25; $i++)
                                                                                <option value="{{ $i }}"
                                                                                    {{ old("rooms.$index.floor_no", $room->floor_no) == $i ? 'selected' : '' }}>
                                                                                    {{ $i }}</option>
                                                                            @endfor
                                                                        </select>
                                                                    </td>
                                                                    <td>
                                                                        <input type="text"
                                                                            name="rooms[{{ $index }}][room_no]"
                                                                            class="form-control @error("rooms.$index.room_no") is-invalid @enderror"
                                                                            value="{{ old("rooms.$index.room_no", $room->room_no) }}"
                                                                            required>
                                                                        @error("rooms.$index.room_no")
                                                                            <div class="invalid-feedback">
                                                                                {{ $message }}
                                                                            </div>
                                                                        @enderror
                                                                    </td>
                                                                    <td>
                                                                        {{-- <select
                                                                            name="rooms[{{ $index }}][room_types]"
                                                                            class="form-select" required>
                                                                            <option value="Niwasi"
                                                                                {{ old("rooms.$index.room_types", $room->room_types) == 'Niwasi' ? 'selected' : '' }}>
                                                                                Niwasi</option>
                                                                            <option value="Balwadi"
                                                                                {{ old("rooms.$index.room_types", $room->room_types) == 'Balwadi' ? 'selected' : '' }}>
                                                                                Balwadi</option>
                                                                            <option value="Meter Room"
                                                                                {{ old("rooms.$index.room_types", $room->room_types) == 'Meter Room' ? 'selected' : '' }}>
                                                                                Meter Room</option>
                                                                            <option value="Society Office"
                                                                                {{ old("rooms.$index.room_types", $room->room_types) == 'Society Office' ? 'selected' : '' }}>
                                                                                Society Office</option>
                                                                            <option value="Welfare Center"
                                                                                {{ old("rooms.$index.room_types", $room->room_types) == 'Welfare Center' ? 'selected' : '' }}>
                                                                                Welfare Center</option>
                                                                            <option value="Terrace"
                                                                                {{ old("rooms.$index.room_types", $room->room_types) == 'Terrace' ? 'selected' : '' }}>
                                                                                Terrace</option>
                                                                            <option value="Refuge"
                                                                                {{ old("rooms.$index.room_types", $room->room_types) == 'Refuge' ? 'selected' : '' }}>
                                                                                Refuge</option>
                                                                        </select> --}}
                                                                        <select
                                                                            name="rooms[{{ $index }}][room_types]"
                                                                            class="form-select" required
                                                                        >
                                                                            @isset($roomTypes)
                                                                                @foreach ($roomTypes as $key => $roomType)
                                                                                    <option
                                                                                        {{ old("rooms.$index.room_types", $room->room_types) == $key ? 'selected' : '' }}
                                                                                        value="{{ $key }}"
                                                                                    >
                                                                                        {{ $roomType }}
                                                                                    </option>
                                                                                @endforeach
                                                                            @endisset
                                                                        </select>
                                                                    </td>
                                                                    <td>
                                                                        <input type="text"
                                                                            name="rooms[{{ $index }}][carpet_area]"
                                                                            class="form-control @error("rooms.$index.carpet_area") is-invalid @enderror"
                                                                            value="{{ old("rooms.$index.carpet_area", $room->carpet_area) }}"
                                                                        />
                                                                        @error("rooms.$index.carpet_area")
                                                                            <div class="invalid-feedback">
                                                                                {{ $message }}
                                                                            </div>
                                                                        @enderror
                                                                    </td>
                                                                    <td>
                                                                        <button type="button"
                                                                            class="btn btn-danger remove-room-btn">Remove</button>
                                                                    </td>
                                                                </tr>
                                                            @endforeach
                                                        @else
                                                            <tr>
                                                                <td><input type="text" name="rooms[0][wing_name]"
                                                                        class="form-control" required></td>
                                                                <td>
                                                                    <select name="rooms[0][floor_no]" class="form-select" required style="min-width: 80px; max-width: 150px; padding-right: 10px;">
                                                                        <option>G</option>
                                                                        @for ($i = 1; $i <= 25; $i++)
                                                                            <option>{{ $i }}</option>
                                                                        @endfor
                                                                    </select>

                                                                </td>
                                                                <td>
                                                                    <input type="text" name="rooms[0][room_no]"
                                                                        class="form-control @error('rooms.0.room_no') is-invalid @enderror"
                                                                        value="{{ old('rooms.0.room_no', '') }}"
                                                                        required>
                                                                    @error('rooms.0.room_no')
                                                                        <div class="invalid-feedback">
                                                                            {{ $message }}
                                                                        </div>
                                                                    @enderror
                                                                </td>
                                                                <td>
                                                                    <select name="rooms[0][room_types]"
                                                                        class="form-select" required>
                                                                        @isset($roomTypes)
                                                                            @foreach ($roomTypes as $key => $roomType)
                                                                                <option value="{{ $key }}">{{ $roomType }}</option>
                                                                            @endforeach
                                                                        @endisset
                                                                    </select>
                                                                </td>
                                                                <td>
                                                                    <input type="text" name="rooms[0][carpet_area]"
                                                                        class="form-control @error('rooms.0.carpet_area') is-invalid @enderror"
                                                                        value="{{ old('rooms.0.carpet_area', '') }}"
                                                                    >
                                                                    @error('rooms.0.carpet_area')
                                                                        <div class="invalid-feedback">
                                                                            {{ $message }}
                                                                        </div>
                                                                    @enderror
                                                                </td>
                                                                <td>
                                                                    <button type="button"
                                                                        class="btn btn-danger remove-room-btn">Remove</button>
                                                                </td>
                                                            </tr>
                                                        @endif
                                                    </tbody>



                                                </table>
                                                <button type="button" class="btn btn-outline-primary mt-3"
                                                    id="addRoomButton">Add Room</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="card-footer border-top border-light">
                                    <button type="submit" class="btn btn-success me-2" id="submitBtn">
                                        {{ isset($inventory) ? 'Update' : 'Submit' }}
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        @include('layouts.footer')
    </div>
</div>

<!-- Vendor JS -->
<script src="{{ asset('assets/js/vendor.min.js') }}"></script>
<script src="{{ asset('assets/js/app.min.js') }}"></script>
<!-- Scripts -->
<script>
    // Add room functionality
    document.getElementById('addRoomButton').addEventListener('click', function() {
        const tableBody = document.getElementById('roomTableBody');
        const newIndex = tableBody.children.length; // Get the current number of rows

        const newRow = `
    <tr>
        <td><input type="text" name="rooms[${newIndex}][wing_name]" class="form-control"></td>
        <td>
            <select name="rooms[${newIndex}][floor_no]" class="form-select" required style="min-width: 80px; max-width: 150px; padding-right: 10px;">
                <option>G</option>
                @for ($i = 1; $i <= 25; $i++)
                    <option>{{ $i }}</option>
                @endfor
            </select>
        </td>
        <td><input type="text" name="rooms[${newIndex}][room_no]" class="form-control" required></td>
        <td>
            <select name="rooms[${newIndex}][room_types]" class="form-select" required>
                @isset($roomTypes)
                    @foreach ($roomTypes as $key => $roomType)
                        <option value="{{ $key }}">{{ $roomType }}</option>
                    @endforeach
                @endisset
            </select>
        </td>
        <td><input type="text" name="rooms[${newIndex}][carpet_area]" class="form-control"></td>
        <td><button type="button" class="btn btn-danger remove-room-btn">Remove</button></td>
    </tr>`;
        tableBody.insertAdjacentHTML('beforeend', newRow);
    });

    // Remove room functionality
    document.getElementById('roomTableBody').addEventListener('click', function(e) {
        if (e.target && e.target.classList.contains('remove-room-btn')) {
            e.target.closest('tr').remove();
        }
    });

    // Event listener to validate the form on submission
    document.getElementById('inventoryForm').addEventListener('submit', function(event) {
        let isValid = true;
        const rooms = document.querySelectorAll('[name^="rooms["]'); // Select all room fields

        // Loop through each room and check if fields are filled
        rooms.forEach((roomField, index) => {
            const roomNoField = roomField.closest('tr').querySelector('[name^="rooms[' + index +
                '][room_no]"]');
            const wingNameField = roomField.closest('tr').querySelector('[name^="rooms[' + index +
                '][wing_name]"]');
            const roomNoValue = roomNoField ? roomNoField.value.trim() : '';
            const wingNameValue = wingNameField ? wingNameField.value.trim() : '';

            // Validate if room_no and wing_name are filled
            if (!roomNoValue || !wingNameValue) {
                isValid = false; // If room_no or wing_name is empty, mark the form as invalid
                if (!roomNoValue) roomNoField.classList.add('is-invalid');
                if (!wingNameValue) wingNameField.classList.add('is-invalid');
            } else {
                roomNoField.classList.remove('is-invalid');
                wingNameField.classList.remove('is-invalid');
            }
        });

        // If validation fails, prevent form submission
        if (!isValid) {
            event.preventDefault();
            alert("Please fill in all fields (Room No, Wing Name) for each room.");
        }
    });


    $(document).ready(function() {
        @if ($errors->any())
            @foreach ($errors->all() as $error)
                toastr.error("{{ $error }}");
            @endforeach
        @endif

        @if (session('success'))
            toastr.success("{{ session('success') }}");
        @endif

        @if (session('error'))
            toastr.error("{{ session('error') }}");
        @endif

        document.getElementById('inventoryForm').addEventListener('submit', function() {
            const submitBtn = document.getElementById('submitBtn');
            submitBtn.disabled = true;
            submitBtn.innerHTML = 'Submitting...'; // Change button text to indicate submission
        });
    });
</script>



</body>

</html>