@extends('layouts.app')
@section('content')

<div class="page-header">
    <div>
        <h1>Bank Details <small>List & Management</small></h1>
    </div>
    <div class="float-end">
        <button class="btn btn-primary" id="createNewBank"><i class="fa fa-plus"></i> Add Bank Detail</button>
    </div>
</div>

<div class="content mt-3">
    <div class="card shadow mb-4">
        <div class="card-header">Bank Details List</div>
        <div class="card-body">
            <table class="table table-bordered data-table" width="100%">
                <thead>
                    <tr>
                        <th>S.No.</th>
                        <th>Account Name</th>
                        <th>Bank Name</th>
                        <th>IFSC</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>

@include('view-modals/vendor_bank_addedit') 
@endsection

@section('scripting')
<script>
$(function () {
    $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } });

    var table = $('.data-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('vendor.bankDetails.list', $vendor) }}",
        columns: [
            {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false},
            {data: 'account_name', name: 'account_name'},
            {data: 'bank_name', name: 'bank_name'},
            {data: 'ifsc_code', name: 'ifsc_code'},
            {data: 'status', name: 'status', orderable: false},
            {data: 'action', name: 'action', orderable: false}
        ],
        language: { search: "_INPUT_", searchPlaceholder: "Search records" }
    });

    $('#createNewBank').click(function(){
        $('#bankDetailsForm').trigger("reset");
        $('#bank_detail_id').val('');
        $('#bankModalHeading').html("Add Bank Detail");
        $('#bankDetailsModal').modal('show');
    });

    $('body').on('click', '.editBank', function () {
        var id = $(this).data('id');
        $.get("{{ url('vendor/bankDetails/edit') }}/" + id, function(data) {
            $('#bankModalHeading').html("Edit Bank Detail");
            $('#bank_detail_id').val(data.id);
            $('#account_name').val(data.account_name);
            $('#bank_name').val(data.bank_name);
            $('#bank_account_number').val(data.bank_account_number);
            $('#ifsc_code').val(data.ifsc_code);
            $('#bank_branch').val(data.bank_branch);
            $('#account_type').val(data.account_type);
            $('#pan_number').val(data.pan_number);
            $('#gstin').val(data.gstin);
            $('#bank_address').val(data.bank_address);
            $('#status').val(data.status);
            $('#bankDetailsModal').modal('show');
        })
    });

    $('#bankDetailsForm').submit(function(e) {
        e.preventDefault();
        var formData = $(this).serialize();
        var id = $('#bank_detail_id').val();
        var url = "{{ url('vendor/bankDetails/store') }}/{{ $vendor }}";

        $.ajax({
            url: url,
            method: 'POST',
            data: formData,
            success: function(data) {
                $('#bankDetailsModal').modal('hide');
                table.draw();
                swal("Success", data.message, "success");
            },
            error: function(xhr) {
                if (xhr.status === 422) {
                    var errors = xhr.responseJSON.errors;
                    $.each(errors, function (key, msg) {
                        $('#' + key).addClass('is-invalid');
                        $('#' + key + '-error').text(msg[0]);
                    });
                }
            }
        });
    });

    $('body').on('click', '.deleteBank', function(){
        var id = $(this).data('id');
        swal({
            title: "Are you sure?",
            text: "This bank detail will be deleted permanently!",
            icon: "warning",
            buttons: true,
            dangerMode: true
        }).then((willDelete) => {
            if (willDelete) {
                $.ajax({
                    url: "{{ url('vendor/bankDetails/delete') }}/" + id,
                    type: 'DELETE',
                    success: function () {
                        table.draw();
                        swal("Deleted!", "Bank detail was deleted.", "success");
                    }
                });
            }
        });
    });

});
</script>
@endsection