@extends('layouts.app')

@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <div class="card-title-wrap bar-success">
                        <h4 class="card-title" id="basic-layout-form">Receive Payment</h4>
                    </div>
                    {{-- <p class="mb-0">This is the most basic and cost estimation form is the default position.</p> --}}
                </div>
                <div class="card-body">
                    <div class="px-3">
                        <form class="form" id="paymentReceiveForm">
                            <div class="form-body">
                                {{-- <h4 class="form-section">
                                <i class="icon-user"></i> Personal Details</h4> --}}
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="received_from">Received From </label>
                                            <select name="received_from" id="received_from" class="form-control" disabled>
                                                <option selected disabled>Select Customer</option>
                                                @foreach ($clients as $client)
                                                    <option value="{{ $client->id }}"
                                                        {{ $client->id == $payment->received_from ? 'selected' : '' }}>
                                                        {{ $client->client_name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="date">Posting Date</label>
                                            <input type="date" id="date" value="{{ $payment->date }}" class="form-control"
                                                name="date" disabled>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="mode_pmt">Mode of Payment</label>
                                            <select name="mode_pmt" id="mode_pmt" class="form-control" disabled>
                                                <option selected disabled>Select Mode</option>
                                                @foreach ($modes as $mod)
                                                    <option value="{{ $mod->id }}"
                                                        {{ $payment->mode_pmt == $mod->id ? 'selected' : '' }}>
                                                        {{ $mod->mode_name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="amount">Amount</label>
                                            <input type="text" id="amount" class="form-control"
                                                value="{{ $payment->amount }}" name="amount" disabled>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="memo">Memo</label>
                                            <input type="text" disabled id="memo" value="{{ $payment->memo }}" class="form-control"
                                                name="memo">
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="instrument_number">Instrument Number</label>
                                            <input type="text" id="instrument_number"
                                                value="{{ $payment->instrument_number }}" class="form-control"
                                                name="instrument_number" disabled>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">Account Type</label>
                                            <select name="account_type" class="form-control" id="account_type" disabled>
                                                <option value="">Please Select</option>
                                                <option value="Bank">Bank</option>
                                                <option value="Employee">Employee</option>
                                                <option value="Client">Client</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="deposit_to">Select Deposit To </label>
                                            <select name="deposit_to" id="deposit_to" class="form-control" disabled>
                                                <option selected  disabled>Please Select</option>
                                                                                       
                                            </select>
                                        </div>
                                    </div>
                                    <input type="hidden" name="deposit_id_select">
                                    <input type="hidden" name="deposit_mode_select">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="is_confirmed">Is Payment Confirmed</label>
                                            <select name="is_confirmed" id="is_confirmed" class="form-control" disabled>
                                                <option value="1" {{ $payment->is_confirmed == 1 ? 'selected' : '' }}>Yes
                                                </option>
                                                <option value="0" {{ $payment->is_confirmed == 0 ? 'selected' : '' }}>No
                                                </option>
                                            </select>
                                        </div>
                                    </div>
                                </div>


                            </div>
                            @if ($payment->is_confirmed==1)    
                            <hr>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Confirmed By:</label>
                                        <h2>{{$payment->confirmed_by}}</h2>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Confirmation Date:</label>
                                        <h2>{{date('d-M-Y',strtotime($payment->document_date))}}</h2>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="">Remarks</label>
                                        <h3>{{$payment->remarks}}</h3>
                                    </div>
                                </div>
                            </div>
                            @endif

                            @if ($payment->status != 'Cancelled')
                                <div class="form-actions">
                                    <button type="button" id="reverse" class="btn btn-danger mr-1">
                                        <i class="icon-trash"></i> Reverse
                                    </button>
                                </div>
                            @endif
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade text-left" id="reverse_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header gradient-green-tea">
                    <h3 class="modal-title text-white" id="myModalLabel3">Reverse Transaction</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form class="form" id="reversal_form" method="POST" action="">
                        <div class="row">
                            <div class="col-12">
                                <div class="form-group">
                                    <label class="text-bold-500" for="note"> Reason </label>

                                    <input type="text" value="{{ $payment->id }}" name="entry_no" id="entry_no"
                                        class="form-control">
                                    <input type="text" hidden value="Customer Payment Receive" name="transaction_name"
                                        id="transaction_name" class="form-control">
                                    <br>
                                    <textarea name="cancel_reason" required id="cancel_reason" class="form-control"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="form-actions center pt-2">
                            <a href="javascript:;" data-dismiss="modal">
                                <button type="button" class="btn btn-danger mr-1">
                                    <i class="icon-trash"></i> Cancel
                                </button>
                            </a>
                            <button type="submit" class="btn btn-raised btn-success btn_reverse" id="btn_reverse">
                                <i class="icon-note"></i> Save
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('afterScript')
    <script src="{{ asset('app-assets/vendors/js/core/jquery-3.3.1.min.js') }}"></script>

    <script>
        $(document).ready(function() {

            $('#deposit_to').select2();
            $('#account_type').val('{{$payment->account_type}}');
            
            $(document).on('change','#account_type',function(){
            var type=$(this).val();
            var output='<option>Please Select</option>';
            if(type=='Bank'){
                output+='@foreach ($accounts as $items)';
                output+='<option data-id="{{$items->id}}" data-mode="bank" value="{{$items->id}}">{{$items->account_name}}-{{$items->banks->bank_name}}</option>';
                output+='@endforeach';
            }
            if(type=='Employee'){
                output+='@foreach ($employees as $emp)';
                output+='<option data-id="{{$emp->id}}" data-mode="employee" value="{{$emp->id}}">{{$emp->emp_name}}</option>';
                output+='@endforeach';
            }
            if(type=='Client'){
                output+='@foreach ($clients as $c)';
                output+='<option data-id="{{$c->id}}" data-mode="client" value="{{$c->id}}">{{$c->client_name}}</option>';
                output+='@endforeach';
            }
            $('#deposit_to').empty();
            $('#deposit_to').append(output);
        });
        $('#account_type').trigger('change');
        $('#deposit_to').val('{{$payment->deposit_to}}')
            $(document).on('change', '#deposit_to', function() {
                var id = $('#deposit_to option:selected').attr('data-id');
                var mode = $('#deposit_to option:selected').attr('data-mode');
                console.log(id, mode)
                $('[name=deposit_id_select]').val(id);
                $('[name=deposit_mode_select]').val(mode);
            });

            $(document).on('click', '#reverse', function() {
                $('#reverse_modal').modal('toggle');
            })

            $('#reversal_form').submit(function(e) {
                $('.btn_reverse').hide();
                e.preventDefault();
                var form_data = new FormData($("#reversal_form")[0]);
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    url: "/client_ledger_reversal",
                    type: "POST",
                    data: form_data,
                    async: false,
                    cache: false,
                    contentType: false,
                    enctype: 'multipart/form-data',
                    processData: false,
                    success: function(res) {
                        $('#btn_reverse').show();
                        swal("Success", "Entry has been Reversed", "success");
                        setTimeout(function() {
                            location.reload(true);
                        }, 1000);
                    },
                    error: function(err) {
                        $('#btn_reverse').show();
                        swal('Not Valid', err.responseJSON.message, 'error');
                        // setTimeout(function() { 
                        //     location.reload();
                        // }, 1000);
                    }
                });
            });

        })
    </script>