@extends('layout.header')

@section('title')
    ALIAN | Create Receipt
@endsection
@section('main')

    <div class="m-grid__item m-grid__item--fluid m-wrapper">
        <!-- BEGIN: Subheader -->
        <div class="m-subheader ">
            <div class="d-sm-flex align-items-center subheader_border_bottom">
                <div class="mr-auto">
                    <h3 class="m-subheader__title m-subheader__title--separator">
                        {{$store_details[0]->store_name}}
                    </h3>
                    <ul class="m-subheader__breadcrumbs m-nav m-nav--inline">
                        <li class="m-nav__item m-nav__item--home">
                            <a href="#" class="m-nav__link m-nav__link--icon">
                                <i class="m-nav__link-icon la la-home"></i>
                            </a>
                        </li>
                        <li class="m-nav__separator">
                            -
                        </li>
                        <li class="m-nav__item">
                            <a href="" class="m-nav__link">
                                            <span class="m-nav__link-text">
                                                Create Receipt
                                            </span>
                            </a>
                        </li>
                        <li class="m-nav__separator">
                            -
                        </li>
                        <li class="m-nav__item">
                            <a href="" class="m-nav__link">
                                            <span class="m-nav__link-text">
                                             {{$store_details[0]->store_name}}
                                            </span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- END: Sub header -->
        <!-- START :: main Content-->
        <div class="m-content payment_collection_20">
            <div class="m-portlet m-portlet--mobile margin_bottom_60">
                <div class="m-portlet__head resp_head_btn">
                    <div class="m-portlet__head-caption">
                        <div class="m-portlet__head-title">
                            <h3 class="m-portlet__head-text">
                                {{$store_details[0]->store_name}}
                            </h3>
                        </div>
                    </div>
                    <div class="m-portlet__head-tools">
                        <ul class="m-portlet__nav admin_form_record">
                            <li class="m-portlet__nav-item">
                                <a href="#" class="blue_bg_shadow_btn" onclick="createReceipt()">
                                                <span>
                                                    <i class="la la-check btn_text submit_icon"></i>
                                                    <span class="btn_text text-capitalize">
                                                        save
                                                    </span>
                                                </span>
                                </a>
                            </li>
                            <li class="m-portlet__nav-item">
                                <a href="#" class="gray_bg_btn">
                                                <span>
                                                    <span class="btn_text">
                                                        Cancel
                                                    </span>
                                                </span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="m-portlet__body admin_order_detail_03">
                    <!--Store Information :: START-->
                    <div class="store_information_20">
                        <div class="detail">
                            <span class="heading">Address:</span>
                            <p>
                                <span> {{$store_details[0]->store_name}}</span>
                             {{$store_details[0]->store_address}},{{$store_details[0]->store_city}},{{$store_details[0]->store_state}},{{$store_details[0]->store_pincode}}
                            </p>
                        </div>
                        <div class="detail">
                            <span class="heading">Contact Information:</span>
                            <p>
                              {{$store_details[0]->store_mobile}}
                            </p>
                        </div>
                    </div>
                    <!--Store Information :: END-->
                    <!--Total Remaining Amount :: START-->
                    <div class="total_remining_amount_20">
                        <div class="info_heading">
                            <h6 class="d-inline-block">Total Remaining Amount</h6>
                        </div>
                        <div class="info_content">
                            &#x20b9;{{$store_details[0]->remaining_amt}}
                        </div>
                    </div>
                    <!--Total Remaining Amount :: END-->
                    <!--Collect Amount Type :: START-->
                    <div class="payment_information_20">
                        <div class="m-form__group form-group">
                            <label >
                                *Collect Amount Type:
                            </label>
                            <div class="m-radio-list">
                                <label class="m-radio m-radio--solid m-radio--success">
                                    <input type="radio" name="amt_type" value="cash">
                                    Cash
                                    <span></span>
                                </label>
                                <label class="m-radio m-radio--solid m-radio--brand">
                                    <input type="radio" name="amt_type" value="cheque">
                                    Cheque
                                    <span></span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <!--Collect Amount Type :: END-->
                    <!--Amount Collection :: START-->
                    <div class="amount_collection_section_20" id="cashContainer">
                        <div class="form-group m-form__group">
                            <label for="example-text-input" class="col-form-label" >
                                *Received Amount(&#x20b9;)
                            </label>
                            <div class="input_width">
                                <input class="form-control m-input" type="text" placeholder="&#x20b9; " id="cashReceive" name="recieved_amt" onkeyup="validateCash()">
                            </div>
                        </div>
                    </div>
                    <div class="amount_collection_section_20" id="chequeContainer">
                        <div class="form-group m-form__group">
                            <label for="example-text-input" class="col-form-label">
                                *Cheque No.
                            </label>
                            <div class="input_width">
                                <input class="form-control m-input" type="text" value="0" id="cheque_no">
                            </div>
                        </div>
                        <div class="form-group m-form__group">
                            <label for="example-text-input" class="col-form-label">
                                *Cheque Amount(&#x20b9;)
                            </label>
                            <div class="input_width">
                                <input class="form-control m-input" type="text" placeholder="&#x20b9; " id="chequeReceive" onkeyup="validateCheque()">
                            </div>
                        </div>
                    </div>
                    <div class="amount_collection_section_20" id="remainingContainer">
                        <div class="form-group m-form__group">
                            <label for="example-text-input" class="col-form-label">
                                *Next Payment Date
                            </label>
                            <div class="input_width">
                                <input class="form-control m-input" type="text" id="nxt_payment">
                            </div>
                        </div>
                        <div class="form-group m-form__group">
                            <label for="example-text-input" class="col-form-label">
                                Remaining Amount(&#x20b9;)
                            </label>
                            <div class="input_width">
                                <input class="form-control m-input" type="text" value="&#x20b9; " id="rem_amt" disabled>
                            </div>
                        </div>
                    </div>
                    <!--Amount Collection :: END-->
                    <!--Deposit Amount :: START-->
                    <div class="deposit_amount_section_20">
                        <div class="info_img">
                            <img src="/images/deposite_amount_20.png" alt="amount"/>
                        </div>
                        <div class="info_content">
                            <label for="example-text-input" class="info_label">
                                Deposited Amount
                            </label>
                            <div class="info_value">
                                <input class="form-control m-input" type="text" value="&#x20b9; " id="amount_20_3">
                            </div>
                        </div>
                    </div>
                    <!--Deposit Amount :: END-->
                </div>

            </div>
        </div>
        <!-- END EXAMPLE TABLE PORTLET-->
    </div>
    <!-- END :: main Content-->
<script>
    let tot_amt = parseInt('{{$store_details[0]->remaining_amt}}')
    let cashContainer = document.getElementById("cashContainer")
    let chequeContainer = document.getElementById("chequeContainer")
    let remainingContainer = document.getElementById("remainingContainer")
    let rem_amt = 0
    let deposited_amt = 0
    cashContainer.style.display = 'none'
    chequeContainer.style.display = 'none'
    remainingContainer.style.display = 'none'
    $("input[type='radio']").click(function(){
        var radioValue = $("input[name='amt_type']:checked").val();
        if(radioValue === "cash"){
            cashContainer.style.display = "block"
            chequeContainer.style.display = "none"
            document.getElementById("rem_amt").value = 0
            document.getElementById("chequeReceive").value = null
            document.getElementById("cheque_no").value = 0
        }

        else{
            chequeContainer.style.display = "block"
            cashContainer.style.display = "none"
            document.getElementById("rem_amt").value = 0
            document.getElementById("cashReceive").value = null
        }



    });
    function validateCash() {
        let amt = event.target.value
        if(amt <= tot_amt){
            rem_amt = tot_amt - amt
            remainingContainer.style.display = 'block'
            document.getElementById("rem_amt").value = rem_amt
        }
        else{
            deposited_amt = amt - tot_amt
            document.getElementById("rem_amt").value = 0
            rem_amt = 0
        }

    }

    function validateCheque() {
        let amt = event.target.value
        if(amt <= tot_amt){
            rem_amt = tot_amt - amt
            remainingContainer.style.display = 'block'
            document.getElementById("rem_amt").value = rem_amt
        }
        else {
            deposited_amt = amt - tot_amt
            document.getElementById("rem_amt").value = 0
            rem_amt = 0
        }

    }

    function createReceipt() {
        event.preventDefault()
        let token = '{{ csrf_token() }}'
        let storeId = '{{ $store_id }}'
        let credits = 0
        let debits = 0
        let receiptType = ""
        let chequeNo = document.getElementById("cheque_no").value
        let next_payment_date = document.getElementById("nxt_payment").value

        if(document.getElementById("cashReceive").value > 0){
            credits = document.getElementById("cashReceive").value
            receiptType = "cash"
        }

        else{
            credits = document.getElementById("chequeReceive").value
            receiptType = "credit"
        }


        let data = {
            storeId,
            credits,
            debits,
            receiptType,
            chequeNo,
            next_payment_date,
            rem_amt,
            deposited_amt,
            _token: token
        }

        console.log(data)


        $.ajax({
            url: '../save_receipt',
            type: 'POST',
            data: data
        }).then(res => console.log(res))
    }


</script>

@endsection