@extends('layouts.app')

@section('content')
    <div class="container-fluid">

        <!-- start page title -->
        <div class="row cus-landing">
            <div class="col-6">
                <div class="page-title-box">
                    <h4 class="page-title">Payment List for Invoice Number : <a href="{{ URL::to('invoice-details/'.$invoice_id) }}">{{ $invoice_number }}</a></h4>
                </div>
            </div>
            <div class="col-md-6">
                <button type="button" class="btn btn-outline-primary btn-lg m-1 float-right" data-toggle="modal" data-target="#send_mail" id="{{ $invoice_id }}">Mail Payment Acknowledgment</button>
            </div>
        </div>
        <!-- end page title -->


        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        {{--<div class="row">
                            <div class="col-md-12">
                                <a href="{{ URL::to('/customer-contact-person-add/'.$company_id) }}"><button type="button" class="btn btn-outline-primary mb-4" style="float: right;"><i class="dripicons-plus"></i> Add New</button></a>
                            </div>
                        </div>--}}
                        <div class="content">
                            <div class="tab-pane show active" style="overflow-x:auto;">
                                <table id="basicdatatable" class="table display  w-100 table-bordered table-hover table-centered">
                                    <thead class="thead-dark">
                                    <tr>
                                        <th> Payment Date</th>
                                        <th> Amount</th>
                                        <th> Reference</th>
                                        <th>Action</th>
                                    </tr>
                                    </thead>


                                    <tbody>
                                                                        </tbody>
                                </table>
                            </div> <!-- end preview-->

                        </div> <!-- end tab-content-->

                    </div> <!-- end card body-->
                </div> <!-- end card -->
            </div><!-- end col-->
        </div>
        <!-- end row-->
        <div class="modal fade" id="centermodal" tabindex="-1" role="dialog" aria-hidden="true">

            <!-- /.modal-dialog -->
        </div>




    </div>
    <div class="modal fade" id="send_mail" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myCenterModalLabel">Send Quotation</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div class="modal-body">
                    <div class="form">
                        <div class="form-group">
                            <label for="date">To</label>
                            <input type="hidden" id="invoice_id" value="{{ $invoice_id }}">
                            <select name="" id="to" class="form-control">
                                <option value="select">Please Select</option>
                                                            </select>
                            {{--<input type="text" id="to" value="{{ $quotation->ContactPerson->email  }}" class="form-control">--}}
                        </div>
                        <div class="form-group">
                            <label for="qty">CC</label>
                            <input type="text" id="to_cc" class="form-control" placeholder="Enter To CC">
                            <small>Email with Comma seperated...</small>
                        </div>

                        <button type="button" class="btn btn-outline-primary mail_send" style="float: right;padding: 10px 30px 10px 30px;">Send</button>
                        {{--<div class="spinner-border text-dark "  role="status">
                            <span class="sr-only">Loading...</span>
                        </div>--}}
                        <button class="btn btn-outline-primary show_loader" style="display: none; float: right;" type="button" disabled>
                            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                            Sending Mail, Please wait...
                        </button>
                    </div>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- container -->
    <script>
        $(".open_modal").click(function(){
            var payment_id = $(this).attr('id');
            var csrf_test_name = $("input[name=_token]").val();
            $.ajax({
                type: "POST",
                data: { payment_id: payment_id, '_token' : csrf_test_name },
                url: "{{ url('get-payment-details') }}",
                success: function(res) {
                    $("#centermodal").html(res);
                }
            });
        });
        $(".delete_payment").click(function(){
            var payment_id = $(this).attr('id');
            var csrf_test_name = $("input[name=_token]").val();
            Swal.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.value) {
                    $.ajax({
                        type: "POST",
                        data: { payment_id: payment_id, '_token' : csrf_test_name },
                        url: "{{ url('payment-delete') }}",
                        success: function(res) {
                            $('.progress-spinner').addClass('hidden');
                            Swal.fire("Payment has been deleted!", "", "success");
                            location.reload();
                        }
                    });
                }
            })
        });

        $(".mail_send").click(function(){
            var to = $("#to").val();
            var to_cc = $("#to_cc").val();
            var invoice_id = $("#invoice_id").val();
            var csrf_test_name = $("input[name=_token]").val();
            $(".mail_send").hide();
            $(".show_loader").show();
            $.ajax({
                type: "POST",
                data: { to: to, to_cc: to_cc, invoice_id: invoice_id, '_token' : csrf_test_name },
                url: "{{ url('email-payment-acknowledgement') }}",
                success: function(res) {
                    if(res.to){
                        alert(res.to);die();
                    }
                    $("#to").val('');
                    $('.progress-spinner').addClass('hidden');
                    Swal.fire("Payment Acknowledgement sent successfully!", "", "success");
                    location.reload();
                }
            });
        });
    </script>
@endsection