@extends('admin.layout.master')
@section('custom_style')
    <style>
        /* .labels {
            font-size: 16px;
            font-weight: bold;
        }

        input {
            padding: 18px !important;
            box-shadow: none !important;
        }

        input[type=checkbox] {
            transform: scale(1.2);
        }
 

        .sm-pd-t th {
            padding: 0.5rem;

        }

        .sm-pd-t td {
            padding: 0.1rem;
            padding-right: 0.35rem;
            padding-left: 0.35rem;
        } */

    </style>
@endsection

@section('content')
    @include('flash-message')
    <div class="col-12">

        @if ($errors->any())
            <div class="alert alert-danger" id="hide-alert">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
    </div>

    <div class="card sina-card">
        <div class="card-header d-flex align-items-center justify-content-between"> 
            <h4 class="font-weight-bold mb-0">{{__('obs.receipt')}} {{__('obs.list')}}</h4> 
            <a href="{{route('frontdesk.receipt.receive')}}" class="btn btn-sm btn-light">{{__('obs.received')}} {{__('obs.from')}} {{__('obs.agent')}}/{{__('obs.local')}}</a>
            <button class="btn btn-warning" type="button" name="button" onclick="PrintDiv()">
                <i class="fa fa-print"></i>
            </button>
        </div>
        <div class="card-body">
            <div class="">
                <form action="{{ route('frontdesk.receipt.list') }}" method="get" class="form-horizontal" enctype="multipart/form-data">
                    <div class="row g-2">
                        <div class="form-group col-3">
                            <label for="party_id" class="">{{ __('obs.camelcase_customer') }}</label>
                            <select id="agent_id" name="customer_id" class="form-control  fd_agent_search ">
                                @if (request()->customer_id != null)
                                    <option value="{{ request()->customer_id }}">
                                        {{ \App\Models\Parties::find(request()->customer_id)->name_eng }}
                                    </option>
                                @endif
                            </select>
                        </div>

                        <div class="form-group col-2">
                            <label for="reservation_id" class="col-sm-6">{{__('obs.reservation')}}</label>
                            <select name="reservation_id" id="reservation_id" class="form-control fd_checkin_resv_code_search"></select>
                        </div>
                        
                    
                        {{-- <div class='col-md-2'>
                            <div class="row align-items-center gx-sm-2 gx-0">
                                <label for="reservation_id" class="col-sm-4">{{__('obs.type')}}</label>
                                <div class="col-sm-8">
                                    <select name="receive_type" id="receive_type" class="form-control">
                                        <option value=" ">Select Type</option>
                                        <option value="1">Cash Receive</option>
                                        <option value="2">Bank Receive</option>
                                    </select>
                                </div>
                            </div>
                        </div> --}}
                    

                        <div class="form-group col-2">
                            <label for="start_date" class="col-sm-6 labels">{{ __('obs.start') }} {{ __('obs.date') }}</label>
                            <input type="text" name="start_date" id="start_date" class="form-control date_picker" value="{{ request()->start_date ? date('d-m-Y', strtotime(request()->start_date)) : date('d-m-Y') }}">
                        </div>
                        
                        <div class="form-group col-2">
                            <label for="end_date" class="col-sm-6 labels">{{ __('obs.end') }} {{ __('obs.date') }}</label>
                            <input type="text" name="end_date" id="end_date" class="form-control date_picker" value="{{ request()->end_date ? date('d-m-Y', strtotime(request()->end_date)) : date('d-m-Y') }}">
                        </div>
                        

                        <div class="form-group col-1">
                            <label for="" class="d-block">&nbsp;</label>

                            <button type="button" onclick="getReportData()" value="search_button" class="btn btn-primary" name="search_button" id="search_button" > {{__('obs.search')}} </button>
                            {{-- <button id="submit_button" name="search_button" value="true" type="submit" class="btn btn-info"> {{__('obs.search')}} </button> --}}
                        </div>
                    </div>
                </form>
            </div>

            @include('frontdesk.loader')
            <div id="divTableDataHolder">
               
            </div>

            <div id="receipt_edit" style="display:none">
                <div class="card-header  text-white bg-info " style="padding: .25rem 1.25rem !important ">
            </div>

                <div class="table-responsive" id="">

                    <table class="table table-bordered table-hover text-center" id="">
                        <thead class="mt-3">
                            <tr>
                                <th>{{__('obs.voucher')}} {{__('obs.no')}}</th>
                                <th>{{__('obs.commission')}}</th>
                                <th>{{__('obs.discount')}}</th>
                                <th>{{__('obs.amount')}}</th>
                            </tr>
                        </thead>
                        <tbody id="">

                            <tr class="">
                                <td>
                                    <input type="hidden" name="vuocher_id" id="vuocher_id" value="" class="  form-control">
                                </td>
                                <td>
                                    <input type="hidden" name="commission_invoice_id" id="commission_invoice_id" value="" class=" text-right form-control">
                                    <input type="number" name="commission" id="commission" value="" class=" text-right form-control">
                                </td>
                                <td>
                                    <input type="hidden" name="discount_invoice_id" id="discount_invoice_id" value="" class=" text-right form-control">
                                    <input type="number" name="discount" id="discount" value="" class=" text-right form-control">
                                </td>
                                <td>
                                    <input type="hidden" name="amount_invoice_id" id="amount_invoice_id" value="" class=" text-right form-control">
                                    <input type="number" name="amount" id="amount" value="" class=" text-right form-control">
                                </td>
                            </tr>

                    </table>
                    <div class="form-group col-md-12 text-right">
                        <button id="receipt_update_button"
                            onclick="return receipt_update()" class="btn btn-info  btn-sm">{{__('obs.update')}}</button>

                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection


@section('script')
<script type="text/javascript" src="{{ asset('inventory/blade_js/common.js') }}"></script>

<script>
    $('.select2').select2();
    partySearch('customer', 2);
    function callLoader(){
        $('#divTableDataHolder').html(
            `<div class="d-flex justify-content-center frontdesk_report_loader">
                <div class="spinner-border" role="status">
                <span class="sr-only">Loading...</span>
                </div>
            </div>
        `);
       }
    function getReportData(){
       
            // callLoader();
            $('#loader').show();
            let start_date = $('#start_date').val();
            let end_date = $('#end_date').val();
            let receive_type = $('#receive_type').val();
            let reservation_id = $('#reservation_id').val();
            let customer_id = $('#agent_id').val();
            let search_button = $('#search_button').val();
           
            let payload = {
                start_date, end_date, reservation_id ,receive_type,customer_id,search_button
            };
            console.log("pay", payload);
            var url = "{{ route('frontdesk.receipt.list') }}";
            ajaxCustom(function(res){
                console.log(res);
                $('#divTableDataHolder').html(res.html);
                $('#loader').hide();
            }, 'GET', url, payload);
        }

    function receiptedit(id) {
       var booking_id =  $("#booking_id"+id).val();
       var voucher_id =  $("#voucher_id"+id).val();

        var url = "{{ route('frontdesk.receipt.edit') }}";
        ajaxCustom(function(data) {
            console.log(data);
            $("#amount").val(data.amount);
            if(data.commission){
                $("#commission").val(data.commission);
                $("#commission_invoice_id").val(data.commission_invoice_id);
            }else{
                $('#commission').prop('readonly', true);
                $("#commission").val(0);
                $("#commission_invoice_id").val('');
            }
            if(data.discount){
                $("#discount").val(data.discount);
                $("#discount_invoice_id").val(data.discount_invoice_id);
            }else{
                $('#discount').prop('readonly', true);
                $("#discount").val(0);
                $("#discount_invoice_id").val('');

            }
            $("#amount_invoice_id").val(data.amount_invoice_id);

            $('#vuocher_id').val(data.id);
            $(document).scrollTop($(document).height());
        }, "GET", url, {voucher_id: voucher_id,booking_id:booking_id});

        $("#receipt_edit").show();

    }

    function receipt_update() {
        var voucher_id = $("#vuocher_id").val();
        var amount = $("#amount").val();
        var commission = $("#commission").val();
        var discount = $("#discount").val();
        var amount_invoice_id = $("#amount_invoice_id").val();
        var commission_invoice_id = $("#commission_invoice_id").val();
        var discount_invoice_id = $("#discount_invoice_id").val();
        var url = "{{ route('frontdesk.receipt.update') }}";
        ajaxCustom(function(data) {
            console.log();
            location.reload();
        }, "PUT", url, {voucher_id: voucher_id,amount:amount,commission:commission,discount:discount,amount_invoice_id:amount_invoice_id,commission_invoice_id:commission_invoice_id,discount_invoice_id:discount_invoice_id});

    }


    function ajaxCustom(callback, method, url, data) {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            type: method,
            dataType: 'json',
            url: url,
            data: data,
            success: function (data) {
                callback(data);
            },
            error: function (jqXHR, textStatus, errorThrown) {
                //alert("Server Error");
                if (jqXHR.status === 0) {
                    alert('Not connect.\n Verify Network.');
                } else if (jqXHR.status == 404) {
                    alert('Requested page not found.');
                } else if (jqXHR.status == 500) {
                    alert('Internal Server Error.');
                } else if (errorThrown === 'parsererror') {
                    alert('Requested JSON parse failed');
                } else if (errorThrown === 'timeout') {
                    alert('Time out error');
                } else if (errorThrown === 'abort') {
                    alert('Ajax request aborted ');
                } else {
                    alert('Uncaught Error.\n' + jqXHR.responseText);
                }
            }
        })
    };



    
</script>
@endsection