@extends('admin.layouts.app')
@section('title', 'Transaction')
@push('styles')
    <!-- Include DataTables CSS -->
    @include('datatable.css.data_table_css')
@endpush
@section('container')
    <!-- Page-Title -->
    <div class="row">
        <div class="col-sm-12">
            <div class="page-title-box">
                <div class="float-end">
                    @if(auth()->user()->can('transaction_create'))
                        <a href="{{ route('accounts.transaction_add') }}" class="btn btn-primary">Add Transaction</a>
                    @endif
                </div>
                <h4 class="page-title">Transaction</h4>
            </div>
            <!--end page-title-box-->
        </div>
        <!--end col-->
    </div>
    <!-- end page title end breadcrumb -->

    <div class="row">
        @if (session('success'))
            <div class="alert alert-info">
                {{ session('success') }}
            </div>
        @endif
        @if (session('error'))
            <div class="alert alert-danger">
                {{ session('error') }}
            </div>
        @endif
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <form>
                        <div class="row">
                            <div class="form-group col-md-3">
                                <label>Start Date</label>
                                <input type="date" class="form-control" id="start_date" value="{{ request('start_date') }}" name="start_date">
                            </div>
                            <div class="form-group col-md-3">
                                <label>End Date</label>
                                <input type="date" class="form-control" id="end_date" value="{{ request('end_date') }}" name="end_date">
                            </div>
                        </div>
                    </form>
                </div>
            <!--end card-header-->
                <div class="card-body">
                    {{ $dataTable->table() }}
                </div>
                <!--end card-body-->
            </div>
            <!--end card-->
        </div> <!-- end col -->
    </div> <!-- end row -->
    @php
        $banks = \App\Models\Bank::where('status', 1)
            ->orderBy('bank_name')
            ->get();
    @endphp
    <div class="modal fade" id="modal-edit">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Edit Information</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>

                </div>
                <div class="modal-body">
                    <form id="modal-form" enctype="multipart/form-data" name="modal-form">
                        <input type="hidden" name="id" id="id">
                        <input type="hidden" name="selected_account_head" id="selected_account_head">
                        {{-- <input type="hidden" name="type" id="type"> --}}

                        <div class="form-group row">
                            <label>Type</label>
                            <select class="form-control" name="type" id="type">
                                <option value="1"> Receive </option>
                                <option value="2"> Payment </option>
                            </select>
                        </div>
                        
                        <div class="form-group row">
                            <label>Account Head Type</label>
                            <select class="form-control" name="account_head_type" id="account_head_type">
                                <option value="">Select Account Head Type</option>
                            </select>
                        </div>

                        <div class="form-group row mb-2">
                            <label>Payment Type </label>
                            <select class="form-control select2" name="payment_type" id="payment_type">
                                <option value="1">Cash</option>
                                <option value="2">Bank</option>
                            </select>
                        </div>

                        <div id="bank-info">
                            <div class="form-group row mb-2">
                                <label>Bank </label>
                                <select class="form-control" name="bank" id="bank">
                                    <option value="">Select Bank</option>
                                    @foreach($banks as $bank)
                                        <option value="{{ $bank->id }}">{{ $bank->bank_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group row mb-2">
                                <label>Bank Type</label>
                                <select class="form-control select2 modal_bank_type" id="modal_bank_type" name="bank_type">
                                    <option value="1">Bank Transfer</option>
                                    <option value="2">Cheque</option>
                                </select>
                            </div>

                            <div class="form-group row mb-2 bank_check_area">
                                <label>Cheque No</label>
                                <input type="text" class="form-control" name="cheque_no" id="modal_bank_cheque_no" placeholder="Enter Cheque No.">
                            </div>
                            <div class="form-group row mb-2 bank_check_area">
                                <label>Cheque Date</label>
                                <div class="input-group date">
                                    <div class="input-group-addon">
                                        <i class="fa fa-calendar"></i>
                                    </div>
                                    <input type="date" class="form-control pull-right" id="modal_check_date" name="check_date" value="{{ date('Y-m-d') }}" autocomplete="off">
                                </div>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label>Amount</label>
                            <input class="form-control" name="amount" placeholder="Enter Amount" id="amount">
                        </div>

                        <div class="form-group row">
                            <label>Date</label>
                            <input type="date" class="form-control" name="date" placeholder="Enter Date" id="date">
                        </div>

                        <div class="form-group row">
                            <label>Note</label>
                            <input class="form-control" name="note" placeholder="Enter Note" id="note">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default pull-left" id="modal-close-btn" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="modal-btn-edit">Edit</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
    @include('datatable.js.data_table_js')
    {{--     {!! $dataTable->scripts() !!}--}}
    {{ $dataTable->scripts(attributes: ['type' => 'module']) }}

    <script>
        $(function () {

            $(document).ready(function() {
                var table = $('#transactions-table').DataTable();
                // Reload DataTable on filter change
                $('#start_date,#end_date').on('change', function() {
                    var start_date = $('#start_date').val();
                    var end_date = $('#end_date').val();
                    if(start_date && end_date && start_date <= end_date){
                        table.ajax.url('{{ route('accounts.transaction') }}?' + $.param({
                            start_date: $('#start_date').val(),
                            end_date: $('#end_date').val()
                        })).load();
                    }
                });
            });

            $(document).ready(function() {
                $('body').on('click', '.btn-edit', function () {
                    var transactionId = $(this).data('id');

                    $.ajax({
                        method: "GET",
                        url: "{{ route('accounts.transaction_details_json') }}",
                        data: { transactionId: transactionId }
                    }).done(function( response ) {
                        $('#id').val(response.id);
                        $('#selected_account_head').val(response.account_head_type_id);
                        //alert(response.account_head_type_id);
                        $('#type').val(response.transaction_type);
                        $('#type').trigger('change');
                        
                        $('#payment_type').val(response.transaction_method);
                        $('#payment_type').trigger('change');

                        if(response.transaction_method == 2){
                            $('#bank').val(response.bank_id);
                            $('#modal_bank_type').val(response.bank_type);
                            $('.modal_bank_type').trigger('change');
                            
                            $('#modal_bank_cheque_no').val(response.cheque_no);
                            $('#modal_check_date').val(response.check_date);
                        }
                        
                        $('#amount').val(response.amount);
                        $('#date').val(response.date);
                        $('#note').val(response.note);

                        $('#modal-edit').modal('show');
                    });
                });

                $('body').on('change','#type',function () {

                    var type = $(this).val();
                    var accountHeadTypeSelected = $('#selected_account_head').val();
                    //alert(accountHeadTypeSelected);
                    $('#account_head_type').html('<option value="">Select Account Head Type</option>');

                    if (type != '') {
                        $.ajax({
                            method: "GET",
                            url: "{{ route('accounts.get_account_head_type') }}",
                            data: { type: type }
                        }).done(function( data ) {
                            $.each(data, function( index, item ) {
                                if (accountHeadTypeSelected == item.id)
                                    $('#account_head_type').append('<option value="'+item.id+'" selected>'+item.name+'</option>');
                                else
                                    $('#account_head_type').append('<option value="'+item.id+'">'+item.name+'</option>');
                            });
                        });
                    }
                });
                //$('#type').trigger('change');

                $('#payment_type').change(function () {
                    if ($(this).val() == '1' || $(this).val() == '3') {
                        $('#bank-info').hide();
                    } else {
                        $('#bank-info').show();
                    }
                });

                // $('#payment_type').trigger('change');

                $('.modal_bank_type').change(function () {
                    if ($(this).val() == '1') {
                        $('.bank_check_area').hide();
                    } else {
                        $('.bank_check_area').show();
                    }
                });
                // $('.modal_bank_type').trigger('change');
            });

            

            $('#modal-btn-edit').click(function () {
                var formData = new FormData($('#modal-form')[0]);

                $.ajax({
                    type: "POST",
                    url: "{{ route('accounts.transaction_edit') }}",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (response) {
                        if (response.success) {
                            $('#modal-edit').modal('hide');
                            Swal.fire(
                                'Update!',
                                response.message,
                                'success'
                            ).then((result) => {
                                location.reload();
                                //window.location.href = response.redirect_url;
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Oops...',
                                text: response.message,
                            });
                        }
                    }
                });
            });
            $('#modal-close-btn').click(function () {
                $('#modal-edit').modal('hide');
            });
        });
    </script>
@endpush