@extends('layouts.master')
@section('content')
<div class="row">

    <div class="col-md-12 p-3">

        <div class="card card-outline card-primary">

            <div class="card-header">
                <div class="row">
                    <div class="col-md-9">
                        TPHA Payment Modules
                    </div>
                    <div class="col-md-3 text-right">
                        <button id="paymentBtn" class="btn bg-gradient-primary btn-sm">New Payment Module &nbsp; <i
                                class="fas fa-fw fa-plus-circle"></i></button>
                    </div>
                </div>
            </div>

            <div class="card-body">
                <table class="table w-100" id="payment_table">
                    <thead class="bg-gradient-light">
                        <th>S/N</th>
                        <th>Operator</th>
                        <th>Number</th>
                        <th>Bank</th>
                        <th>Name</th>
                        <th>Account #</th>
                        <th>Swift Code</th>
                        <th>Address</th>
                        <th>Status</th>
                        {{-- <th>Date</th> --}}
                        <th>Action</th>
                    </thead>

                    <tbody>
                        @foreach ($modules as $item)
                        <tr>
                            <td>{{$loop->index+1}}</td>
                            <td>{{$item->operator}}</td>
                            <td>{{$item->number}}</td>
                            @if($item->bank == "")
                            <td>--</td>
                            @else
                            <td>{{$item->bank}}</td>
                            @endif

                            @if($item->account_name == "")
                            <td>--</td>
                            @else
                            <td>{{$item->account_name}}</td>
                            @endif

                            @if($item->account == "")
                            <td>--</td>
                            @else
                            <td>{{$item->account}}</td>
                            @endif

                            @if($item->swift_code == "")
                            <td>--</td>
                            @else
                            <td>{{$item->swift_code}}</td>
                            @endif

                            @if($item->address == "")
                            <td>--</td>
                            @else
                            <td>{{$item->address}}</td>
                            @endif

                            @if($item->publish_status == "published")
                            <td><i class="fas fa-fw fa-circle text-sm text-primary"></i></td>
                            @else
                            <td><i class="fas fa-fw fa-circle text-sm text-warning"></i></td>
                            @endif
                            {{-- <td>{{Carbon\Carbon::parse($item->created_at)->format('d-m-Y')}}</td> --}}
                            <td>
                                <button class="edit btn btn-sm bg-gradient-primary" id="{{$item->id}}"><i
                                        class="fas fa-fw fa-edit"></i></button>&nbsp;&nbsp;
                                <button class="delete btn btn-sm bg-gradient-danger" id="{{$item->id}}"><i
                                        class="fas fa-fw fa-trash"></i></button>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

    </div>

</div>

<!-- Modal -->
<div class="modal fade" id="paymentModal" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header bg-gradient-primary">
                <h5 class="modal-title">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true"><i class="fas fa-fw fa-times-circle text-white"></i></span>
                </button>
            </div>
            <div class="modal-body">
                <form id="payment_form">
                    @csrf

                    <div class="form-group">
                        <div class="row">
                            <div class="col-md-6">
                                <label for="">Operator Name:</label>
                                <input type="text" class="form-control" name="operator" id="operator"
                                    placeholder="Enter Operator Name" required>
                            </div>
                            <div class="col-md-6">
                                <label for="">Operator Number:</label>
                                <input type="text" class="form-control" name="number" id="number"
                                    placeholder="Enter Operator Number" required>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="row">
                            <div class="col-md-6">
                                <label for="">Bank Name:</label>
                                <input type="text" class="form-control" name="bank" id="bank"
                                    placeholder="Enter Bank Name">
                            </div>
                            <div class="col-md-6">
                                <label for="">Account Name:</label>
                                <input type="text" class="form-control" name="account_name" id="account_name"
                                    placeholder="Enter Account Name">
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="row">

                            <div class="col-md-6">
                                <label for="">Account Number:</label>
                                <input type="text" class="form-control" name="account" id="account"
                                    placeholder="Enter Account Number">
                            </div>
                            
                            <div class="col-md-6">
                                <label for="">Publish Status:</label>
                                <select name="publish_status" id="publish_status" class="form-control" required>
                                    <option value="">Select Status</option>
                                    <option value="published">Published</option>
                                    <option value="unpublished">Unpublished</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="row">
                            <div class="col-md-6">
                                <label for="">Swift Code:</label>
                                <input type="text" class="form-control" name="swift_code" id="swift_code"
                                    placeholder="Enter Swift Code">
                            </div>
                            <div class="col-md-6">
                                <label for="">Address:</label>
                                <textarea type="text" class="form-control" name="address" id="address" placeholder="Enter Bank Address" rows="1"></textarea>
                            </div>
                        </div>
                        
                    </div>


                    <div class="loader text-center mb-2" style='display: none;'>
                        <img src="{{asset('images/loader.gif')}}" width="100px" height="15px">
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn bg-gradient-warning" data-dismiss="modal">Close <i
                                class="fas fa-fw fa-times-circle"></i></button>
                        <input type="hidden" name="action_button" id="action_button" value="">
                        <input type="hidden" name="hidden_id" id="hidden_id" value="">
                        <button type="submit" class="btn bg-gradient-primary">Save <i
                                class="fas fa-fw fa-save"></i></button>
                    </div>

                </form>
            </div>

        </div>
    </div>
</div>

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

        //datatable
        $('#payment_table').DataTable({
            serverSide: false,
            responsive: true,
            processing: true,
            stateSave: true,

        });

        //turn on modal
        $('#paymentBtn').on('click', function () {
            $('.modal-title').text('New Payment Module');
            $('#payment_form')[0].reset();
            $('#action_button').val('Create');
            $('.loader').hide();
            $('#paymentModal').modal('show');
        });

        //editing function
        $(document).on('click', '.edit', function (event) {
            event.preventDefault();

            //getting the id 
            var id = $(this).attr('id');

            $.ajax({
                url: "/payment_modules/" + id + "/edit",
                dataType: "JSON",
                success: function (data) {
                    $('.modal-title').text('Edit Payment Module');
                    $('#payment_form')[0].reset();
                    $('#operator').val(data.result.operator);
                    $('#number').val(data.result.number);
                    $('#bank').val(data.result.bank);
                    $('#swift_code').val(data.result.swift_code);
                    $('#account').val(data.result.account);
                    $('#account_name').val(data.result.account_name);
                    $('#publish_status').val(data.result.publish_status);
                    $('#address').val(data.result.address);
                    $('#action_button').val('Edit');
                    $('.loader').hide();
                    $('#hidden_id').val(id);
                    $('#paymentModal').modal('show');
                }
            })

        })

        //submitting values
        $('#payment_form').on('submit', function (event) {
            event.preventDefault();

            var data_url = '';

            //directing the stor route
            if ($('#action_button').val() == 'Create') {
                data_url = "{{ route('payment_modules.store')}}";
            }

            //if it is updating
            if ($('#action_button').val() == 'Edit') {
                data_url = "{{ route('payment_modules.update')}}";
            }

            $.ajax({
                url: data_url,
                dataType: "JSON",
                data: $(this).serialize(),
                method: "POST",
                beforeSend: function () {
                    // Show image container
                    $(".loader").show();
                },

                success: function (data) {

                    if (data.errors) {

                        var result = data.errors;

                        Swal.fire({
                            title: "<h4>Notification!</h4>",
                            text: result,
                            type: "info",
                            icon: "info",
                            showCancelButton: false,
                            showConfirmButton: false,
                            timer: 3000,
                        });
                    }

                    if (data.success) {
                        $('.loader').hide();
                        $('#paymentModal').modal('hide');

                        var result = data.success;

                        Swal.fire({
                            title: "<h4>Notification!</h4>",
                            text: result,
                            icon: "success",
                            type: "success",
                            showCancelButton: false,
                            showConfirmButton: false,
                            timer: 3000,
                        });

                        setTimeout(function () {
                            window.location = "{{url('payment_modules')}}";
                        }, 2000);

                        $('#payment_form')[0].reset();
                    }
                }
            })
        })

        //deleting function
        $(document).on('click', '.delete', function (event) {
            event.preventDefault();
            var delete_id = $(this).attr('id');

            Swal.fire({
                title: "<h4>Are you sure?</h4>",
                text: "You won't be able to revert this!",
                icon: 'warning',
                type: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, delete it!',
                cancelButtonText: 'No, keep it'

            }).then((result) => {
                if (result.value) {

                    $.ajax({
                        url: "/payment_modules/destroy/" + delete_id,
                        success: function (data) {

                            if (data.success) {
                                var result = data.success;

                                Swal.fire({
                                    title: '<h4>Notification!</h4>',
                                    text: result,
                                    icon: 'success',
                                    showCancelButton: false,
                                    showConfirmButton: false,
                                    timer: 2000,
                                });

                                //refreshing page
                                setTimeout(function () {
                                    window.location =
                                        "{{url('payment_modules')}}";
                                }, 2000);
                            }

                            if (data.errors) {
                                var result = data.errors;

                                Swal.fire({
                                    title: '<h4>info!</h4>',
                                    text: result,
                                    icon: 'warning',
                                    showCancelButton: false,
                                    showConfirmButton: false,
                                    timer: 4000,
                                });

                            }
                        }
                    });

                } else if (result.dismiss === Swal.DismissReason.cancel) {
                    Swal.fire({
                        title: '<h4>Information!</h4>',
                        text: 'Your Detail is Safe.',
                        type: 'info',
                        icon: 'info',
                        timer: 2000,
                        showCancelButton: false,
                        showConfirmButton: false,
                    })
                }
            })

        });

    })
</script>
@endsection