@extends('admin.layout.master')
@section('title', 'Deposit')
@section('content')
<style>
    #loaded_info{
        height: calc(100vh - 245px)!important;
    }
    .insert_drawer {
        min-width: 800px!important;
        max-width: 800px!important;
    }
    .scroll_table table{
        min-width: initial!important;
    }
    .scroll_table input{
        padding: 0 2px!important;
    }
    .remain_td{
        display: none
    }
</style>
    <div class="card sina-card mt-0 mb-2">
        <div class="card-header card-header-s">
            <div class="d-flex justify-content-between">
                <h4 class="mb-0">{{ __('obs.deposit_list') }}</h4>
                <button class="btn btn-sm btn-warning" onclick="addNewDrawer2()">{{ __('obs.add') }}</button>
            </div>
        </div>
        <div class="card-body pt-1">
            <div class="row g-2">
                <div class="col-xl-2 col-md-3 col-6">
                    <label for="">{{ __('obs.status') }}</label>
                    <select name="" id="filter_status" class="form-control select_2">
                        <option value="">{{ __('obs.all') }}</option>
                        <option value="1">{{ __('obs.not_returned') }}</option>
                        <option value="2">{{ __('obs.partial_returned') }}</option>
                        <option value="3">{{ __('obs.full_returned') }}</option>
                    </select>
                </div>
                <div class="col-xl-2 col-md-3 col-6">
                    <label for="">{{ __('obs.guest') }}</label>
                    <select name="" id="filter_guest" class="form-control guest_live_search"></select>
                </div>
                <div class="col-xl-2 col-md-3 col-6">
                    <label for="">{{ __('obs.deposit_no') }}</label>
                    <input type="text" class="form-control" id="filter_deposit_no">
                </div>
                <div class="col-xl-2 col-md-3 col-6">
                    <label for="">{{ __('obs.from') }}</label>
                    <input type="text" class="form-control date_picker" value="{{ date('d-m-Y') }}" id="filter_start_date">
                </div>
                <div class="col-xl-2 col-md-3 col-6">
                    <label for="">{{ __('obs.to') }}</label>
                    <input type="text" class="form-control date_picker" value="{{ date('d-m-Y') }}" id="filter_end_date">
                </div>
                <div class="col-xl-1 col-md-2">
                    <label for="">&nbsp;</label>
                    <button class="btn btn-sm btn-primary d-block" onclick="loadData()">{{ __('obs.filter') }}</button>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="commonListBody" style="min-height: 100px" id="loaded_info">

            </div>
        </div>
        <div class="commonListPaginate">

        </div>
    </div>

    <div class="insert_drawer_full_page" onclick="hideAddNewDrawer()">
        <div class="insert_drawer" onclick="dontHideAddNewDrawer(event)">
            <div class="row d-flex justify-content-center">
                <div class="col-11">
                    <style>
                        .form-group{
                            margin-bottom: 0;
                        }
                    </style>
                    <form action="{{ route('frontdesk.valuable_deposit.store') }}" class="form_submit">
                        <input type="hidden" name="row_id" id="row_id">
                        <input type="hidden" name="return_posting" id="return_posting" value="0">
                        <div class="row g-2 mb-2">
                            <div class="col-xl-2 col-lg-3 col-6">
                                <div class="form-group">
                                    <label for="">{{ __('obs.date') }}</label>
                                    <input type="text" value="{{ date('d-m-Y') }}" class="form-control date_picker" name="date" id="date">
                                </div>
                            </div>
                            <div class="col-xl-4 col-lg-5 col-6">
                                <div class="form-group">
                                    <label for="">{{ __('obs.guest') }}</label>
                                    <select id="guest" name="guest_id" class="form-control guest_live_search"></select>
                                </div>
                            </div>
                            <div class="col-xl-1 col-lg-2 col-2">
                                <div class="form-group">
                                    <label for="" class="d-block">&nbsp;</label>
                                    <button type="button" class="btn btn-success btn-block" id="addNewRowButton" onclick="addMoreRow()">+</button>
                                </div>
                            </div>
                        </div>
                        <div class="row scroll_table mb-2">
                            <div class="cl-table-container p-0">
                                <table class="table cl-table">
                                    <style>
                                        th, td{
                                            /* padding: 2px 5px!important; */
                                        }
                                    </style>
                                    <thead>
                                        <tr>
                                            <th style="width: 5%">{{ __('obs.sl') }}</th>
                                            <th style="width: 30%">{{ __('obs.item') }}</th>
                                            <th class="remain_td" style="width: 15%">{{ __('obs.remain') }}</th>
                                            <th style="width: 15%">{{ __('obs.qty') }}</th>
                                            <th style="width: 50%">{{ __('obs.note') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody class="scroll_table_body">
                                    </tbody>
    
                                    <tbody class="scroll_table_body_return">
    
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="form-group">
                                <label for="">{{ __('obs.remarks') }}</label>
                                <textarea name="remarks" class="form-control" id="remarks" cols="100" rows="1"></textarea>
                            </div>
                        </div>
                        <div class="form-group mt-2">
                            <button class="btn btn-success" id="saveButton">{{ __('obs.save') }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    @include('frontdesk.common.common')
@endsection


@section('script')
    <script type="text/javascript" src="{{ asset('inventory/blade_js/common.js') }}"></script>
    <script>
        const store_setting = @json(store_info());
        const warehouse_setting = @json(warehouse_info());
        let ajaxUrl = "{{ route('frontdesk.valuable_deposit.index') }}";
        let ajaxData = {};
        let temp = 1;
        let seq = 1;
        $(document).ready(function(){
            loadData();
            remote_select('guest_live_search', "{{ route('frontdesk.guest_live_search') }}", true, "{{__('obs.select_guest')}}");
        });

        function addMoreRow(is_return=null){
            console.log("is_return", is_return);
            let html = `<tr>
                <input type="hidden" name="details_row_id[]" id="details_row_id${temp}">
                <td class="${is_return == 1 ? 'bg-danger text-white' : ''}">${seq}</td>
                <td><input name="item[]" id="item${temp}" type="text" class="form-control"></td>
                <td class="remain_td"><input name="remain[]" step="any" id="remain${temp}" type="number" class="form-control remain_qty"></td>
                <td><input name="qty[]" onkeyup="checkAvailQty()" step="any" id="qty${temp}" type="number" class="form-control"></td>
                <td><input name="note[]" id="note${temp}" type="text" class="form-control"></td>
            </tr>`;

            if(is_return == 1){
                $('.scroll_table_body_return').append(html);
            }else{
                $('.scroll_table_body').append(html);
            }
            ++temp;
            ++seq;
        }

        function addNewDrawer2(){
            $('#addNewRowButton').attr('disabled', false);
            temp = 1;
            seq = 1;
            $('#return_posting').val(0);
            $('.scroll_table_body tr td.remain_td').hide();
            $('.scroll_table_body').html('');
            $('.scroll_table_body_return').html('');
            $('.remain_td').hide();
            $('#date').attr('disabled', false).val(@json(date('Y-m-d')));
            $('#guest').attr('disabled', false).html('<option></option>');
            $('#remarks').attr('readonly', false).val('');
            addMoreRow();
            addNewDrawer();
        }

        function returnItem(id){
            $('.remain_td').show();
            $('#return_posting').val(1);
            getLoadingStatusNew();
            customAjaxCall(function(res){
                addNewDrawer();
                temp = 1;
                $('#row_id').val(res.info.id);
                $('#date').attr('disabled', true).val(res.info.date);
                $('#guest').attr('disabled', true).html(res.info.guest);
                $('#remarks').attr('readonly', true).val(res.info.remarks);
                temp = 1;
                seq = 1;
                $('#addNewRowButton').attr('disabled', true);
                $('.scroll_table_body').html('');
                $('.scroll_table_body_return').html('');

                for (const val of res.info.get_details) {
                    addMoreRow();
                    console.log(val, temp);
                    $(`#item${(temp-1)}`).val(val.item).attr('readonly', true);
                    $(`#remain${(temp-1)}`).val((val.qty - val.return_qty)).attr('readonly', true);
                    $(`#qty${(temp-1)}`).val(0).attr('readonly', false);
                    $(`#note${(temp-1)}`).val();
                    $(`#details_row_id${(temp-1)}`).val(val.id);
                    checkAvailQty();
                }
                $('.scroll_table_body tr td.remain_td').show();
                closeSweetAlert();
            }, 'get', "{{ route('frontdesk.valuable_deposit.find') }}", {id});
        }

        function editLostFound(id){
            $('#return_posting').val(0);
            $('.remain_td').hide();
            $('#addNewRowButton').attr('disabled', false);
            getLoadingStatusNew();
            customAjaxCall(function(res){
                addNewDrawer();
                $('#row_id').val(res.info.id);
                $('#date').attr('disabled', false).val(res.info.date);
                $('#guest').attr('disabled', false).html(res.info.guest);
                $('#remarks').attr('disabled', false).val(res.info.remarks);
                temp = 1;
                seq = 1;
                $('.scroll_table_body').html('');
                $('.scroll_table_body_return').html('');
                let deposit_serial = 1;
                for (const val of res.info.get_details) {
                    addMoreRow();
                    console.log(val, temp);
                    $(`#item${(temp-1)}`).val(val.item);
                    $(`#qty${(temp-1)}`).val(val.qty);
                    $(`#note${(temp-1)}`).val(val.note);
                    $(`#details_row_id${(temp-1)}`).val(val.id);
                }
                deposit_serial = temp;
                seq = 1;
                $('.scroll_table_body_return').append(`<tr>
                    <td colspan="5" class="bg-danger text-white text-center"><h5>Return</h5></td>
                </tr>`);
                for (const val of res.info.get_all_return) {
                    addMoreRow(1);
                    console.log(val, temp);
                    $(`#item${(temp-1)}`).attr('readonly', true).val(val.item);
                    $(`#qty${(temp-1)}`).val(val.qty);
                    $(`#note${(temp-1)}`).val(val.note);
                    $(`#details_row_id${(temp-1)}`).val(val.id);
                }
                seq = deposit_serial;
                $('.scroll_table_body_return tr td.remain_td').hide();
                $('.scroll_table_body tr td.remain_td').hide();
                closeSweetAlert();
            }, 'get', "{{ route('frontdesk.valuable_deposit.find') }}", {id});
        }

        function loadData(){
            temp = 1;
            seq = 1;
            $('.scroll_table_body').html('');
            $('.scroll_table_body_return').html('');
            addMoreRow();

            hideAddNewDrawer();
            getLoadingStatusNew();
            let filter_deposit_no = $('#filter_deposit_no').val();
            let filter_status = $('#filter_status').val();
            let filter_guest = $('#filter_guest').val();
            let filter_start_date = $('#filter_start_date').val();
            let filter_end_date = $('#filter_end_date').val();
            ajaxData = {filter_deposit_no,filter_status,filter_guest,filter_start_date,filter_end_date};
            customAjaxCall(function(res){
                $('.commonListBody').html(res.body);
                $('.commonListPaginate').html(res.paginate);
                closeSweetAlert();
            }, 'GET', ajaxUrl, ajaxData)
        }

        function checkAvailQty(){
            flg = 0;
            if($('#return_posting').val() == 1){
                $('.remain_qty').each(function(j) {
                    let index = Number(j+1);
                    if (parseFloat($(`#qty${index}`).val()) > parseFloat($(`#remain${index}`).val())) {
                        flg = 1;
                        $(`#qty${index}`).css({"border": "1px solid red"});
                    } else if ($(`#qty${index}`).val() <= $(`#remain${index}`).val()) {
                        $(`#qty${index}`).css({"border": "none"});
                    }
                    console.log("remain",$(`#qty${index}`).val(),$(`#remain${index}`).val());
                });

                if(flg == 1){
                    $('#saveButton').attr('disabled', true);
                } else {
                    $('#saveButton').attr('disabled', false);
                }
            }
        }
    </script>

@endsection