@extends('admin.layout.master')
@section('title','BED PLANNING')
@section('content')
<div class="card sina-card mt-0 mb-1">
    <div class="card-header card-header-s">
        <div class="d-flex align-items-center justify-content-between">
            <h4 class="mb-0">{{ __('obs.bed_planning') }}</h4>
        </div>
    </div>
    <div class="card-body px-1 py-2">
        <div class="row g-2">
            <div class="col-xl-1 col-lg-1 col-6">
                <div class="form-group">
                    <label for="">{{ __('obs.start_date') }}</label>
                    <input type="text" value="{{ date('d-m-Y') }}" name="start_date" class="form-control date_picker" id="start_date">
                </div>
            </div>
            <div class="col-xl-1 col-lg-1 col-6">
                <div class="form-group">
                    <label for="">{{ __('obs.end_date') }}</label>
                    <input type="text" value="{{ date('d-m-Y') }}" name="end_date" class="form-control date_picker" id="end_date">
                </div>
            </div>
            <div class="col-xl-2 col-lg-3">
                <div class="form-group">
                    <label for="">{{ __('obs.room_type') }}</label>
                    <select name="room_type" class="form-control select_2" id="room_type">
                        <option value="">{{ __('obs.all') }}</option>
                        @foreach ($room_types as $room_type)
                            <option value="{{ $room_type->id }}">{{ $room_type->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="col-xl-5 col-lg-5">
                <div class="form-group">
                    <label for="">{{ __('obs.room_nos') }}</label>
                    <select name="room_ids" class="form-control" id="room_ids" multiple multiselect-search="true" multiselect-select-all="true" multiselect-max-items="5">
                        @foreach ($rooms as $room)
                            <option value="{{ $room->id }}">{{ $room->room_number }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="col-xl-1 col-lg-1">
                <label for="" class="d-block">{{ __('obs.type') }}</label>
                <select name="transaction_type" class="form-control select_2" id="transaction_type">
                    <option value="1">{{ __('obs.transfer') }}</option>
                    <option value="2">{{ __('obs.inactive') }}</option>
                </select>
            </div>
            <div class="col-xl-1 col-lg-1">
                <label for="" class="d-block">&nbsp;</label>
                <button class="btn btn-primary w-100" onclick="getPreview()">{{ __('obs.preview') }}</button>
            </div>
            <div class="col-xl-1 col-lg-1">
                <label for="">&nbsp;</label>
                <div class="dropdown">
                    <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                      Color Hints
                    </a>
                    <ul class="dropdown-menu py-0" aria-labelledby="dropdownMenuLink">
                        <p class="w-100 mb-0 py-1 px-2 bg-primary text-white">Editable</p>
                        <p class="w-100 mb-0 py-1 px-2 bg-warning text-dark">Will be Tranfer</p>
                        <p class="w-100 mb-0 py-1 px-2 bg-danger text-white">Will be inactive</p>
                        <p class="w-100 mb-0 py-1 px-2 bg-secondary text-white">Tranfered</p>
                        <p class="w-100 mb-0 py-1 px-2 bg-dark text-white">Made inactive</p>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-10">
        <div class="preview_table" id="loaded_info" style="max-height: calc(100vh - 270px)!important;">
        </div>
    </div>
    <div class="col-2" id="updated_plan" style="display: none">
        <table class="table table-bordered cl-table">
            <thead>
                <tr>
                    <th>{{ __('obs.bed_no') }}</th>
                    <th>{{ __('obs.from') }}</th>
                    <th>{{ __('obs.to') }}</th>
                </tr>
            </thead>
            <tbody id="updated_plan_table_body">
            </tbody>
        </table>
        <p class="mb-0">
            {{ __('obs.from') }} : <span id="form_from_date"></span>
        </p>
        <p class="mb-0">
            {{ __('obs.to') }} : <span id="form_to_date"></span>
        </p>
        <button class="btn btn-primary" id="update_plan_btn" onclick="updatePlan()">{{ __('obs.update') }}</button>
    </div>
</div>

@include('frontdesk.common.common')
@endsection

@section('script')
    <script src="{{ asset('frontdesk/sortable.min.js') }}"></script>
    <script src="{{ asset('frontdesk/jquery-sortable.min.js') }}"></script>
    <script src="{{ asset('frontdesk/multiselect-dropdown.js') }}"></script>
    <script>
        let update_info = [];
        let from_date = null;
        let to_date = null;
        let transaction_type = 1;
        $(document).ready(function(){
            $('.select_2').select2()
        });
        function getPreview(){
            update_info = [];
            let payload = {
                start_date: $('#start_date').val(),
                end_date: $('#end_date').val(),
                room_type: $('#room_type').val(),
                room_ids: JSON.stringify($('#room_ids').val()),
                default_no_of_beds: $('#default_no_of_beds').val(),
                transaction_type: $('#transaction_type').val()
            }
            transaction_type = payload.transaction_type;
            getLoadingStatusNew();
            customAjaxCall(function(res){
                $('.preview_table').html(res.html);
                toggleSortable();
                closeSweetAlert();
                from_date = payload.start_date;
                to_date = payload.end_date;
                generatePlanning();
            }, "get", "{{ route('frontdesk.bed_system.planning.create') }}", payload);
        }
        function toggleSortable() {
            $('.bed-container').sortable({
                group: 'shared',
                cursor: 'move',
                animation: 300,
                ghostClass: 'ghost',
                // dragClass: 'dragging',
                filter: '.not-draggable',
                onAdd: handleAdd,
                onRemove: handleRemove
            });
        }
        function handleAdd(e){
            let bed_id = $(e.item).attr('data-id');
            let to_room_id = $(`#${e.target.id}`).attr('data-room-id');
            let from_room_id = $(e.item).attr('from-room-id');

            let bed_no = $(e.item).attr('data-bed-no');
            let from_room_no = $(e.item).attr('from-room-no');
            let to_room_no = $(`#${e.target.id}`).attr('data-room-no');
            updateBedPlanning(bed_id, to_room_id, from_room_id, bed_no, from_room_no, to_room_no, 1);
            let bed_count = $(`.bed_count_${to_room_id}`).text();
            $(`.bed_count_${to_room_id}`).text(parseInt(bed_count) + 1);
        }
        function handleRemove(e){
            let from_room_id = $(`#${e.target.id}`).attr('data-room-id');
            let bed_count = $(`.bed_count_${from_room_id}`).text();
            $(`.bed_count_${from_room_id}`).text(parseInt(bed_count) - 1);
        }
        function updateBedPlanning(bed_id, to_room_id, from_room_id, bed_no, from_room_no, to_room_no, status_id) { // Card
            let update_data = {
                bed_id: bed_id,
                from_room_id: from_room_id,
                to_room_id: to_room_id,
                bed_no: bed_no,
                from_room_no: from_room_no,
                to_room_no: to_room_no,
                status_id: status_id
            };
            let index = update_info.findIndex((item) => item.bed_id == bed_id);
            let count_adj = 0;
            if (index !== -1) {
                if((status_id == 1 && from_room_id == to_room_id) || status_id == 0){
                    update_info.splice(index, 1);
                    if(transaction_type == 1){
                        $(`#bed_${bed_id}`).addClass('bg-primary text-white').removeClass('bg-warning text-black');
                    } else{
                        $(`#bed_${bed_id}`).addClass('bg-primary').removeClass('bg-danger');
                        $(`#bed_${bed_id}`).children('.remove-icon').removeClass('fa-check').addClass('fa-times');
                        count_adj = 1;
                    }
                } else{
                    update_info[index] = update_data;
                    if(transaction_type == 1){
                        $(`#bed_${bed_id}`).addClass('bg-warning text-black').removeClass('bg-primary text-white');
                    }
                }
            } else {
                update_info.push(update_data);
                if(transaction_type == 1){
                    $(`#bed_${bed_id}`).addClass('bg-warning text-black').removeClass('bg-primary text-white');
                } else{
                    $(`#bed_${bed_id}`).addClass('bg-danger').removeClass('bg-primary');
                    $(`#bed_${bed_id}`).children('.remove-icon').removeClass('fa-times').addClass('fa-check');
                    count_adj = -1;
                }
            }
            if(transaction_type == 2){
                let bed_count = parseInt($(`.bed_count_${from_room_id}`).text());
                bed_count += count_adj;
                $(`.bed_count_${from_room_id}`).text(bed_count);
            }
            generatePlanning();
        }
        function generatePlanning() {
            let html = "";
            for (let i = 0; i < update_info.length; i++) {
                html += `<tr>
                    <td>${update_info[i].bed_no}</td>
                    <td>${update_info[i].from_room_no}</td>
                    <td class="${ update_info[i].status_id == 1 ? '' : 'bg-danger bg-opacity-50' }">${ update_info[i].status_id == 1 ? update_info[i].to_room_no : 'Inactive' }</td>
                </tr>`;
            }
            $('#updated_plan_table_body').html(html);

            if (update_info.length > 0) {
                $('#updated_plan').show();
            } else {
                $('#updated_plan').hide();
            }
            $('#form_to_date').text(to_date);
            $('#form_from_date').text(from_date);
        }
        function removeBed(bed_id, room_id, bed_no, room_no) {
            updateBedPlanning(bed_id, room_id, room_id, bed_no, room_no, room_no, 0);
        }
        function updatePlan() {
            let payload = {
                update_info: JSON.stringify(update_info),
                from_date: from_date,
                to_date: to_date
            };
            getLoadingStatusNew();
            customAjaxCall(function(res) {
                closeSweetAlert();
                Swal.fire({
                    icon: 'success',
                    title: 'Success',
                    text: 'Planning added successfully!',
                    showConfirmButton: true
                }).then((result) => {
                    window.location.reload();
                })
            }, "post", "{{ route('frontdesk.bed_system.planning.store') }}", payload);
        }
    </script>

@endsection