@extends('admin.layout.master')
@section('title', 'Room Purchase')
@section('content')
    <style>
        #loaded_info{
            height: calc(100vh - 245px)!important;
        }
    </style>
    @php
        $i = 0;
    @endphp
    <div class="card sina-card mt-0 mb-1">
        <div class="card-header card-header-s d-flex justify-content-between">
            <h5 class="mb-0">{{__('obs.room_purchase')}}</h5>
            <a href="{{ route('frontdesk.room_purchase.index') }}" class="btn btn-sm btn-light">{{__('obs.list')}}</a>
        </div>
        <div class="card-body pt-1">
            <form action="{{ route('frontdesk.room_purchase.store') }}" class="form_submit">
                <div class="row">
                    <div class="col-10">
                        <div class="row g-3">
                            <div class="col-lg-12">
                                <input type="hidden" id="row_id" name="row_id" value="{{ isset($info) ? $info->id : null }}">
                                <input type="hidden" id="hidden_hotel_id" name="hidden_hotel_id">
                                <table class="table cl-table table-form table-bordered rounded-2">
                                    <tr>
                                        <td width="12%">
                                            <label for="" class="cl-form-label">{{ __('obs.hotel') }}<span class="required_field"></span></label>
                                        </td>
                                        <td width="21%"`>
                                            <div class="d-flex">
                                                <select class="form-control fd_other_hotel_live_search" name="hotel_id" id="hotel_id" onchange="hotelSelected()">
                                                    @isset($info)
                                                        <option value="{{ $info->oh_id }}">{{ $info->getHotel->name }}</option>
                                                    @endisset
                                                </select>
                                            </div>
                                        </td>
                                        <td width="12%">
                                            <label for="" class="cl-form-label">{{ __('obs.vendor') }}<span class="required_field"></span></label>
                                        </td>
                                        <td width="21%">
                                            <div class="d-flex">
                                                @if(isset($info))
                                                    @include('v2.inventory.global.party_live_dd', ['type'=>1, 'skip_add_new'=>1, 'selected_party'=>$info->getVendor])
                                                @else
                                                    @include('v2.inventory.global.party_live_dd', ['type'=>1, 'skip_add_new'=>1])
                                                @endif
                                            </div>
                                        </td>
                                        <td width="12%">
                                            <label for="" class="cl-form-label">{{ __('obs.attachment') }}</label>
                                        </td>
                                        <td width="22%">
                                            <div class="d-flex">
                                                <input type="file" name="attachment" class="form-control cl-form-control input_shadow">
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group">
                                <strong class="me-2">{{__('obs.vat')}} {{__('obs.value')}}: </strong>
                                @foreach(getTaxes(array(1)) as $val)
                                    <div class="form-check cl-form-check me-2">
                                        <label class="form-check-label cl-form-check-label" for="{{ $val->name }}">{{ $val->name }}</label>
                                        <input name="vat_taxes[]" id="{{ $val->name }}"
                                        class="form-check-input cl-form-check-input fd_vat_list"
                                        data-value="{{ $val->value }}"
                                        value="{{ $val->id }}"
                                        type="checkbox"
                                        onchange="grandSum()"
                                        @isset($info)
                                            @if(in_array($val->id,$info->tax_transaction_ids)) checked @endif
                                        @endisset
                                        @empty($info) @if($val->flag == 1) checked @endif @endempty>
                                    </div>
                                @endforeach
                            </div>
                            <div class="form-group">
                                <strong class="me-2">{{__('obs.vat')}} {{__('obs.type')}} : </strong>
                                <div class="form-check cl-form-check me-2">
                                    <label class="form-check-label cl-form-check-label" for="fd_vat_type1">{{__('obs.including')}}</label>
                                    <input class="form-check-input cl-form-check-input" onchange="grandSum()" id="fd_vat_type1" name="fd_vat_type" type="radio" value="1" @isset($info) @if ($info->tax_type == 1) checked @endif @endisset @empty($info) checked @endempty />
                                </div>
                                <div class="form-check cl-form-check me-2">
                                    <label class="form-check-label cl-form-check-label" for="fd_vat_type2">{{__('obs.excluding')}}</label>
                                    <input class="form-check-input cl-form-check-input" onchange="grandSum()" id="fd_vat_type2" name="fd_vat_type" type="radio" value="2" @isset($info) @if ($info->tax_type == 2) checked @endif @endisset />
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <div class="cl-table-container" style="max-height: 530px">
                                    <table class="table cl-table table-bordered room_purchase_info" style="display: none;">
                                        <thead>
                                            <tr>
                                                <th>{{ __('obs.room_type') }}</th>
                                                <th>{{ __('obs.floor') }}</th>
                                                {{-- <th>{{ __('obs.room_no') }}</th> --}}
                                                <th>{{ __('obs.qty') }}</th>
                                                <th>
                                                    {{ __('obs.rate') }}
                                                    <input type="text" class="form-control" id="common_rate" onkeyup="commonRateChange()">
                                                </th>
                                                <th>
                                                    {{ __('obs.start_date') }}
                                                    <input type="text" class="form-control date_picker" id="common_start_date" onchange="commonStartDateChange()">
                                                </th>
                                                <th>
                                                    {{ __('obs.end_date') }}
                                                    <input type="text" class="form-control date_picker" id="common_end_date" onchange="commonEndDateChange()">
                                                </th>
                                                <th>{{ __('obs.night') }}</th>
                                                <th>{{ __('obs.total') }}</th>
                                                {{-- <th>{{ __('obs.action') }}</th> --}}
                                                <th><button type="button" class="btn btn-sm btn-primary" onclick="addNewRow()"><i class="fas fa-plus"></i></button></th>
                                            </tr>
                                        </thead>
                                        <tbody class="purchase_body">
                                            @empty($info)
                                                @for ($i = 0; $i < 1; $i++)
                                                    <tr>
                                                        <input type="hidden" name="pre_id[]" value="0">
                                                        <td style="min-width: 100px">
                                                            <select style="width: 100%" name="room_type[]" id="room_type{{ $i }}" class="form-control select_2 room_type"></select>
                                                        </td>
                                                        <td style="min-width: 100px">
                                                            <select style="width: 100%" name="floor[]" id="floor{{ $i }}" class="form-control select_2 floor"></select>
                                                        </td>
                                                        {{-- <td>
                                                            <input type="text" id="room_no{{ $i }}" onkeyup="roomNoChange({{ $i }})" name="room_no[]" class="form-control">
                                                        </td> --}}
                                                        <td>
                                                            <input type="text" id="qty{{ $i }}" onkeyup="getSum({{ $i }})" name="qty[]" class="form-control">
                                                        </td>
                                                        <td>
                                                            <input type="number" step="any" onkeyup="getSum({{ $i }})" id="rate{{ $i }}" name="rate[]" class="form-control rate">
                                                        </td>
                                                        <td>
                                                            <input type="text" id="start_date{{ $i }}" onchange="getDays({{ $i }})" name="start_date[]" class="form-control date_picker start_date">
                                                        </td>
                                                        <td>
                                                            <input type="text" id="end_date{{ $i }}" onchange="getDays({{ $i }})" name="end_date[]" class="form-control date_picker end_date">
                                                        </td>
                                                        <td>
                                                            <input type="number" id="night{{ $i }}" name="night[]" readonly class="form-control">
                                                        </td>
                                                        <td>
                                                            <input type="number" id="total{{ $i }}" name="total[]" readonly class="form-control total">
                                                        </td>
                                                        <td>

                                                        </td>
                                                    </tr>
                                                @endfor
                                            @endempty
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-2">
                        <div class="room_purchase_bill" style="display: none;">
                            <div class="form-group">
                                <label for="">{{ __('obs.total') }}</label>
                                <input type="number" class="form-control" readonly id="total_amount">
                            </div>
                            <div class="form-group">
                                <label for="">{{ __('obs.tax') }}</label>
                                <input type="number" class="form-control" readonly id="total_tax">
                            </div>
                            <div class="form-group">
                                <label for="">{{ __('obs.amount_without_tax') }}</label>
                                <input type="number" class="form-control" readonly id="amount_without_tax">
                            </div>
                            <div class="form-group">
                                <label for="">{{ __('obs.gross_amount') }}</label>
                                <input type="number" class="form-control" readonly id="gross_amount">
                            </div>
                            <div class="form-group">
                                <button class="btn btn-sm btn-success">Save</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    @include('frontdesk.common.common')
@endsection

@section('script')

    <script>
        let i = @json($i);
        let room_type = '';
        let floor = '';
        async function hotelSelected(){
            // console.log("HOTEL SELECTED");
            
            getLoadingStatusNew();
            let hotel_id = $('#hotel_id').val();
            $('#hidden_hotel_id').val(hotel_id);
            $('#hotel_id').attr('disabled', true);
            return new Promise((resolve, reject) => {
                customAjaxCall(function(res){
                    $.each(res.floors, function(key,val){
                        floor += `<option value="${val.id}">${val.floor_no}</option>`
                    });
                    $.each(res.room_types, function(key,val){
                        room_type += `<option value="${val.id}">${val.name}</option>`
                    });
                    $('.room_type').html(room_type);
                    $('.floor').html(floor);
                    $('.select_2').select2();
                    $('.room_purchase_info').show();
                    $('.room_purchase_bill').show();
                    closeSweetAlert();
                    resolve();
                }, "GET", "{{ route('frontdesk.other_hotel.find') }}", {id: hotel_id});
            });
        }

        function addNewRow(pre_info=[]){
            let common_rate = $('#common_rate').val();
            let common_start_date = $('#common_start_date').val();
            let common_end_date = $('#common_end_date').val();
            let pre_id = 0;
            // console.log("pre_info", pre_info);
            if(pre_info.length != 0){
                common_rate = pre_info.rate;
                common_start_date = changeDateFormatTo(pre_info.start_date,0);
                common_end_date = changeDateFormatTo(pre_info.end_date,1);
                pre_id = pre_info.id;
            }
            ++i;
            let remove_buuton = `<button type="button" class="btn btn-sm btn-danger" onclick="removeRow(${i})"><i class="fas fa-minus"></i></button>`;
            // <td>
            //     <input type="text" id="room_no${ i }" onkeyup="roomNoChange(${ i })" name="room_no[]" class="form-control">
            // </td>
            let new_row = `<tr id="tr${i}">
                <input type="hidden" name="pre_id[]" value="${pre_id}">
                <td style="min-width: 100px">
                    <select style="width: 100%" name="room_type[]" id="room_type${ i }" class="form-control select_2 room_type">${room_type}</select>
                </td>
                <td style="min-width: 100px">
                    <select style="width: 100%" name="floor[]" id="floor${ i }" class="form-control select_2 floor">${floor}</select>
                </td>
                <td>
                    <input type="text" id="qty${ i }" onkeyup="getSum(${ i })" name="qty[]" class="form-control">
                </td>
                <td>
                    <input type="number" step="any" onkeyup="getSum(${i})" id="rate${ i }" value="${common_rate}" name="rate[]" class="form-control rate">
                </td>
                <td>
                    <input type="text" id="start_date${ i }" onchange="getDays(${i})" value="${common_start_date}" name="start_date[]" class="form-control date_picker start_date">
                </td>
                <td>
                    <input type="text" id="end_date${ i }" onchange="getDays(${i})" value="${common_end_date}" name="end_date[]" class="form-control date_picker end_date">
                </td>
                <td>
                    <input type="number" id="night${ i }" name="night[]" readonly class="form-control">
                </td>
                <td>
                    <input type="number" id="total${ i }" name="total[]" readonly class="form-control total">
                </td>
                <td>
                    ${pre_info.length == 0 ? remove_buuton : ''}
                </td>
            </tr>`;
            $('.purchase_body').append(new_row);
            $('.select_2').select2();
            if(pre_info.length != 0){
                $(`#floor${i}`).select2();
                $(`#room_type${i}`).select2();
                $(`#floor${i}`).val(pre_info.floor_id).trigger('change');
                $(`#room_type${i}`).val(pre_info.room_type_id).trigger('change');
                $(`#room_no${i}`).val(pre_info.room_no);
                $(`#qty${i}`).val(pre_info.qty);
                console.log("===", pre_info.room_type_id, $(`#room_type${i}`).html());
                
            }
            flatpickr('.date_picker', {
                dateFormat: 'd-m-Y', //'YYYY-MM-DD',
                disableMobile: "true"
            });
            getDays(i);
        }

        function removeRow(i){
            $(`.purchase_body #tr${i}`).remove();
            grandSum();
        }

        function getSum(i){
            let rate = $(`#rate${i}`).val();
            let night = $(`#night${i}`).val();
            let qty = $(`#qty${i}`).val();
            if(isNaN(night)){
                night = 0;
            }

            // console.log("rate", rate);
            if(rate == ''){
                rate = 0;
            }

            if(qty == ''){
                qty = 1;
            }

            // console.log("k", rate, night);
            let total = parseFloat(rate)*parseFloat(night)*parseFloat(qty);
            $(`#total${i}`).val(total);
            grandSum();
        }

        const getDays = (i) => {
            let start = $(`#start_date${i}`).val();
            start = getFormatedDate(start);
            if (typeof start == "undefined" || start == "") {
                start = 0;
            }
            let end = $(`#end_date${i}`).val();
            end = getFormatedDate(end);

            if (typeof end == "undefined" || end == "") {
                end = 0;
            }
            let diff = Math.floor((Date.parse(end) - Date.parse(start)) / 86400000);
            if(isNaN(diff)){
                diff = 0;
            }
            $(`#night${i}`).val(diff)
            getSum(i);
        }

        function getFormatedDate(dateToBeFormated){
            var date_arr = dateToBeFormated.split('-');
            // console.log('date array',date_arr);
            var return_date = (date_arr[2]+'-'+date_arr[1]+'-'+date_arr[0]);
            return return_date;
        }

        function commonRateChange(){
            let common_rate = $('#common_rate').val();
            $('.rate').val(common_rate).trigger('keyup');
        }

        function commonStartDateChange(){
            let common_start_date = $('#common_start_date').val();
            $('.start_date').val(common_start_date).trigger('change');
        }

        function commonEndDateChange(){
            let common_end_date = $('#common_end_date').val();
            $('.end_date').val(common_end_date).trigger('change');
        }

        function grandSum(){
            let total_amount = 0;
            $('.total').each(function(){
                total_amount += parseFloat($(this).val());
            });
            let vatInfo = getTaxPercent(total_amount);
            $('#total_amount').val(total_amount);
            $('#total_tax').val(parseFloat(vatInfo.tax_amt).toFixed(2));
            $('#amount_without_tax').val(parseFloat(vatInfo.vat_without_total).toFixed(2));
            $('#gross_amount').val(parseFloat(parseFloat(vatInfo.tax_amt)+parseFloat(vatInfo.vat_without_total)).toFixed(2));
            // console.log("vatInfo", vatInfo);
        }

        function getTaxPercent(total_amount) {
            var total_vat_percent=0;
            var vat_type=$("input[type=radio][name=fd_vat_type]:checked").val();
            $(".fd_vat_list").each(function () {
                if($(this).is(":checked")){
                    var vat_value=$(this).attr("data-value");
                    total_vat_percent=parseFloat(total_vat_percent) + parseFloat(vat_value);
                }
            });
            var vatInfo=calIncludingTax(total_amount,total_vat_percent,vat_type);
            return vatInfo;
        }

        $(document).ready(function(){
            if(@json(isset($info))){
                setEditData();
            }
        });

        async function setEditData(){
            let q = await hotelSelected();
            let info = @json(isset($info) ? $info : []);
            for(data of info.get_details){
                addNewRow(data);
            }
        }

        const changeDateFormatTo = (date,add_days) => {
            var result = new Date(date);
            result.setDate(result.getDate() + add_days);
            let yy = result.getFullYear();
            let mm = result.getMonth()+1;
            let dd = result.getDate();
            mm = mm < 10 ? '0'+mm : mm;
            dd = dd < 10 ? '0'+dd : dd;
            return `${dd}-${mm}-${yy}`;
        }

        function roomNoChange(i){
            let room_no = $(`#room_no${i}`).val();
            if(room_no != '' && room_no != null){
                $(`#qty${i}`).val(1).attr('readonly',true);
            } else {
                $(`#qty${i}`).attr('readonly',false);
            }
            getSum(i);
        }
    </script>

@endsection