@extends('layouts.admin.master')
@section('title', $pageTitle)

@section('vendor-style')
<!-- <link rel="stylesheet" href="{{asset('assets/vendor/libs/apex-charts/apex-charts.css')}}"> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<style type="text/css">
    .select2-selection.select2-selection--single{ padding-right: 10px !important; }
</style>
@endsection

@section('vendor-script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript">
    $(document).on('select2:open', function(e) {
        window.setTimeout(function () {
            document.querySelector('input.select2-search__field').focus();
        }, 0);
    });

    $('#customer').select2({
        placeholder: 'Select Customer',
        allowClear: true,
        closeOnSelect: true,
        ajax: {
            url: "{{route('customerSearch')}}",
            dataType: 'json',
            delay: 250,
            processResults: function (data) {
                return {
                    results: $.map(data, function (item) {
                        return {
                            text: item.name,
                            id: item.id
                        }
                    })
                };
            },
            cache: true
        }
    });

    $('.select2select').select2({
        placeholder: 'Select',
        minimumResultsForSearch: '',
        width: 'resolve',
        allowClear: true,
        closeOnSelect: true,
    });

    $('#payMode').on('change', function () {
        var mode = $(this).val();
        if(mode == 1)
        {
            $('.payModeData').addClass('d-none');
            $('#chequeNo').prop('required', false).val('');
            $('#chequeDate').prop('required', false).val('');
        }
        else
        {
            $('.payModeData').removeClass('d-none');
            $('#chequeNo').prop('required', true).val('');
            $('#chequeDate').prop('required', true).val('');
        }
    });

    /*$('#ledgers').on('change', function () {
        if($("#customer option:selected").val() !== "" )
        {
            $("#customer").val('').change();
        }
    });*/

    $('#customer').on('change', function () {
        var customer_id = $(this).val();
        var branch = $("#branch option:selected").val();
        var nameClass = '';
        var customText = '';

        /*if($("#ledgers option:selected").val() !== "" )
        {
            $("#ledgers").val('').change();
        }*/
        
        if(branch != '')
        {
            $.ajax({
                url: "{{route('transactions.calculate.due')}}",
                type: "POST",
                data: {
                    customer_id: customer_id,
                    branch_id: branch,
                    _token: '{{csrf_token()}}'
                },
                dataType: 'json',
                success: function (res) {
                    if(res.success)
                    {
                        if(res.payableStatus == 'DF')
                        {
                            nameClass = 'text-success';
                            customText = 'Due From: ';
                        }
                        else
                        {
                            nameClass = 'text-danger';
                            customText = 'Due To: ';
                        }
                        var resamt = parseFloat(res.amount);
                        $('#dueAmount').addClass(nameClass).html('<b>'+customText+'&#8377; '+resamt.toFixed(2)+'</b>');
                    }
                    else
                    {
                        alert(res.message);
                    }
                }
            });
        }
        else
        {
            alert('Please select branch');
            $(this).select2('destroy').val("").select2({
                placeholder: 'Select Customer',
            });
        }
    });

    
    $(document).ready(function(){
        $('#driverForm').submit(function(event){
            var ledgers = $('#ledgers').val();
            var customer = $('#customer').val();

            if(!ledgers && !customer)
            {
                $('#ledgers').attr('required', true);
            }
            else
            {
                $('#ledgers').removeAttr('required');
            }

            if(!ledgers && !customer)
            {
                alert('Please select at least one option from either select box.');
                event.preventDefault();
            }
            else if(ledgers && customer)
            {
                $("#ledgers").val('').change();
                $("#customer").val('').change();
                alert('Please select only one option from either the Ledgers or Customer dropdown.');
                event.preventDefault();
            }
        });
    });
</script>

<script type="text/javascript">
    var pathp = "{{ route('purchases.invoice.autocomplete') }}";
    $(document).on('focus', '.purchase_invoice', function(e) {
        var thisElement;
        thisElement = $(this);
        thisElement.autocomplete({
            source: function(request, response) {
              $.ajax({
                url: pathp,
                type: 'GET',
                dataType: "json",
                data: {
                   search: request.term
                },
                success: function( data ) {
                    var result;
                    result = [
                        {
                            label: 'There is no matching record found for '+request.term,
                            value: ''
                        }
                    ];
                    if(data.length)
                    {
                        result = $.map(data, function(obj){
                            return {
                                label: obj.invoice_no,
                                value: obj.invoice_no,
                                data : obj
                            };
                        });
                        
                    }
                    response(result);
                }
              });
            },
            autoFocus: true,            
            minLength: 2,
            select: function (event, ui) {
                if(ui)
                {
                    var data;
                    data = ui.item.data;
                    $('.purchase_invoice').val(data.invoice_no);
                }
               return false;
            }
        });
    });

    var pathSale = "{{ route('sale.invoice.autocomplete') }}";
    $(document).on('focus', '.sale_invoice', function(e) {
        var thisElement;
        thisElement = $(this);
        thisElement.autocomplete({
            source: function(request, response) {
              $.ajax({
                url: pathSale,
                type: 'GET',
                dataType: "json",
                data: {
                   search: request.term
                },
                success: function( data ) {
                    var result;
                    result = [
                        {
                            label: 'There is no matching record found for '+request.term,
                            value: ''
                        }
                    ];
                    if(data.length)
                    {
                        result = $.map(data, function(obj){
                            return {
                                label: obj.invoice_no,
                                value: obj.invoice_no,
                                data : obj
                            };
                        });
                        
                    }
                    response(result);
                }
              });
            },
            autoFocus: true,            
            minLength: 2,
            select: function (event, ui) {
                if(ui)
                {
                    var data;
                    data = ui.item.data;
                    $('.sale_invoice').val(data.invoice_no);
                }
               return false;
            }
        });
    });

    $(document).on('change', '#referenceType', function(e){
        var fieldVal = $(this).val();
        if(fieldVal == 'Sale')
        {
            $('#saleData').removeClass('d-none');
            $('#purchaseData').addClass('d-none');
            $('#sale_invoice').val('');
            $('#purchase_invoice').val('');
        }
        else if(fieldVal == 'Purchase')
        {
            $('#purchaseData').removeClass('d-none');
            $('#saleData').addClass('d-none');
            $('#sale_invoice').val('');
            $('#purchase_invoice').val('');
        }
        else
        {
            $('#purchaseData').addClass('d-none');
            $('#saleData').addClass('d-none');
            $('#sale_invoice').val('');
            $('#purchase_invoice').val('');
        }
    });
</script>
@endsection

@section('content')
<!-- PAGE-HEADER -->
<div class="page-header">
    <h1 class="page-title">{{ $pageTitle }}</h1>
    <div>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0)">Accounts</a></li>
            <li class="breadcrumb-item active" aria-current="page">Create {{ $pageTitle }}</li>
        </ol>
    </div>
</div>
<!-- PAGE-HEADER END -->

@if(count($errors) > 0)
    <div class="row mb-2">
        <div class="col-lg-12">
            <div class="alert alert-danger alert-dismissible" role="alert">
                <h6 class="alert-heading d-flex align-items-center fw-bold mb-1">Error!!</h6>
                @foreach ($errors->all() as $error)
                    <p class="mb-0">{{ $error }}</p>
                @endforeach
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"> </button>
            </div>
        </div>
    </div>
@endif
@if($message = Session::get('error'))
    <div class="row mb-2">
        <div class="col-lg-12">
            <div class="alert alert-danger alert-dismissible" role="alert">
                <h6 class="alert-heading d-flex align-items-center fw-bold mb-0">{{ $message }}</h6>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"> </button>
            </div>
        </div>
    </div>
@endif
@if($message = Session::get('success'))
    <div class="row mb-2">
        <div class="col-lg-12">
            <div class="alert alert-success alert-dismissible" role="alert">
                <h6 class="alert-heading d-flex align-items-center fw-bold mb-0">{{ $message }}</h6>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"> </button>
            </div>
        </div>
    </div>
@endif

<div class="col-8 mx-auto">
    <form id="driverForm" action="{{ route('transactions.store') }}" method="post">
        @csrf
        <div class="row mt-4">
            <div class="col-md-12">
                <div class="card mb-4">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">{{ $pageTitle }} Details:</h5> <small class="text-muted float-end">Add {{ $pageTitle }}</small>
                    </div>
                    <div class="card-body">
                        <div class="row">

                            <div class="col-6">

                                <div class="row mb-3">
                                    <div class="col-6">
                                        <label class="form-label" for="inputDate">Date</label>
                                        <input type="date" id="inputDate" name="inputDate" class="form-control" value="{{ old('inputDate') }}" placeholder="Date" autofocus required />
                                    </div>
                                    <div class="col-6">
                                        <label class="form-label" for="branch">Branch</label>
                                        <select id="branch" name="branch" class="form-control select2select" required>
                                            <option value="">--Select--</option>
                                            @foreach($companys as $company)
                                                <option value="{{$company->id}}" {{ (count($companys) == 1)?'selected':'' }}>{{$company->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <div class="col-12">
                                        <label class="form-label" for="referenceType">Reference</label>
                                        <select id="referenceType" name="referenceType" class="form-control select2select" required>
                                            <option value="Other">Other</option>
                                            <option value="Sale">Sale</option>
                                            <option value="Purchase">Purchase</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <div class="col-12">
                                        <label class="form-label" for="transType">Mode</label>
                                        <select id="transType" name="transType" class="form-control select2select" required>
                                            @if($type == 3)
                                            <option value="3">Receipt</option>
                                            @elseif($type == 4)
                                            <option value="4">Payment</option>
                                            @elseif($type == 5)
                                            <option value="5">Opening Balance</option>
                                            @elseif($type == 9)
                                            <option value="9">Debit Note</option>
                                            @elseif($type == 10)
                                            <option value="10">Credit Note</option>
                                            @endif
                                        </select>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <div class="col-12">
                                        <label class="form-label" for="payMode">Payment Mode</label>
                                        <select id="payMode" name="payMode" class="form-control select2select" required>
                                            <option></option>
                                            <option value="1">Cash</option>
                                            <option value="2">Cheque</option>
                                            <option value="3">DD</option>
                                            <option value="4">RTGS</option>
                                            <option value="5">NEFT</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="col-6">
                                <div class="row mb-3">
                                    <div class="col-6">
                                        <label class="form-label" for="ledgers">Ledger</label>
                                        <select id="ledgers" name="ledgers" class="form-control select2select">
                                            <option value="">--Select--</option>
                                            @foreach($ledgers as $ledger)
                                                <option value="{{$ledger->id}}" {{ (count($ledgers) == 1)?'selected':'' }}>{{$ledger->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="col-6">
                                        <label class="form-label" for="customer">Customer</label>
                                        <select id="customer" name="customer" class="form-control select2">
                                            <option value="">--Select--</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <div id="saleData" class="d-none">
                                        <label class="form-label" for="sale_invoice">Invoice No</label>
                                        <input type="text" id="sale_invoice" name="sale_invoice" class="form-control sale_invoice" value="{{ old('sale_invoice') }}" placeholder="Invoice No" />
                                    </div>
                                    <div id="purchaseData" class="d-none">
                                        <label class="form-label" for="purchase_invoice">Invoice No</label>
                                        <input type="text" id="purchase_invoice" name="purchase_invoice" class="form-control purchase_invoice" value="{{ old('purchase_invoice') }}" placeholder="Invoice No" />
                                    </div>
                                </div>
                                
                                <div class="row mb-3">
                                    <div class="col-12">
                                        @if($type == 5)
                                            <label class="form-label" for="transactionType">Transaction Type</label>
                                            <select id="transactionType" name="transactionType" class="form-control select2select" required>
                                                <option></option>
                                                <option value="1" selected>Credit</option>
                                                <option value="2">Debit</option>
                                            </select>
                                        @else
                                            <label class="form-label">Due Amount</label>
                                            <div class="w-100 p-2"><h4 class="mb-0" id="dueAmount"><b>&#8377; 0.00</b></h4></div>
                                        @endif
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <div class="col-12 payModeData d-none">
                                        <div class="row">
                                            <div class="col-6">
                                                <label class="form-label" for="chequeNo">Cheque/DD/RTGS/NEFT No</label>
                                                <input type="text" id="chequeNo" name="chequeNo" class="form-control" value="{{ old('chequeNo') }}" placeholder="No" />
                                            </div>
                                            <div class="col-6">
                                                <label class="form-label" for="chequeDate">Cheque/DD/RTGS/NEFT Dated</label>
                                                <input type="date" id="chequeDate" name="chequeDate" class="form-control" value="{{ old('chequeDate') }}" />
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <div class="col-12">
                                        <label class="form-label" for="transAmount">Amount</label>
                                        <input type="text" id="transAmount" name="transAmount" class="form-control" value="{{ old('transAmount') }}" placeholder="Amount" required />
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 mb-3">
                                <label class="form-label" for="transDescription">Description</label>
                                <textarea name="transDescription" id="transDescription" class="form-control" placeholder="Description" rows="4" required></textarea>
                            </div>

                            <div class="col-12 text-center demo-vertical-spacing">
                                <button type="submit" class="btn btn-primary me-sm-3 me-1">Create</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection