@extends('layouts.app')

@section('content')
<div class="col-12">

</div>
<div class="col-12">
    <div class="card">
        <div class="card-header">
            <h5 class="title mb-0">Payment Period</h5>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb"style="background-color: white; padding-left: 2px">
                    <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Payment Period</li>
                </ol>
            </nav>
        </div>
        <div class="card-body all-icons">
            <div class="w-100 text-right">
                <button class="btn btn-primary btn-sm text-white" id="btnAddPaymentPeriod">ADD PAYMENT PERIOD</button>
                {{-- <form id="frmSearch" class="navbar-search" action="{{ route('contract.search') }}">
                    <div class="input-group no-border">
                        <input type="text" name="keyword" @if(isset($keyword)) value="{{ $keyword }}" @endif class="form-control" placeholder="Search using client..." autocomplete="off">
                        <div class="input-group-append">
                        <button type="submit" class="txtSearch input-group-text">
                            <i class="now-ui-icons ui-1_zoom-bold"></i>
                        </button>
                        </div>
                    </div>
                </form> --}}
            </div>
            <div class="table-responsive">

                <table class="table">
                    <thead class=" text-primary">
                        <tr>
                            <th>ID</th>
                            <th>Start Date</th>
                            <th>End Date</th>
                            <th>Action</th>
                            <th>Delete</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($paymentperiods as $paymentperiod)
                            <tr id="generalTR{{ $paymentperiod->id }}">
                                <td>{{ $paymentperiod->id }}</td>
                                <td>{{ $paymentperiod->start_date }}</td>
                                <td>{{ $paymentperiod->end_date }}</td>
                                <td><a href="{{ route('payment', [ 'ppid' =>$paymentperiod->id ]) }}" class="btn btn-primary btn-sm text-white">View</a></td>
                                <td>
                                    <button type="button" class="px-1 btn btn-danger btn-link btn-sm btnDelete" id="dl{{ $paymentperiod->id }}"><i class="fa fa-trash"></i> </button>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        <div class="card-footer">
            <p class="text-secondary">Showing {{ count($paymentperiods) }} of {{ $paymentperiods->appends(request()->input())->total() }} entries</p>
            {{ $paymentperiods->appends(request()->input())->links() }}
        </div>
    </div>
</div>

<div class="modal" tabindex="-1" role="dialog" id="mdlAddPaymentPeriod">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <form method="POST" action="{{ route('paymentperiod.store') }}" enctype="multipart/form-data">
            @csrf
            <div class="modal-header">
            <h5 class="modal-title">NEW PAYMENT PERIOD</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            </div>
            <div class="modal-body text-secondary">

                <div class="col-12">
                    <div class="form-group">
                        <label>From Date</label>
                        <input type="text" class="form-control selector @if ($errors->has('starting_date')) is-invalid @endif" value="{{ old('starting_date') }}" placeholder="required"  id="txtFromDate" name="starting_date" />
                        @if ($errors->has('starting_date'))
                            <div class="invalid-feedback">
                            <strong>{{ $errors->first('starting_date') }}</strong>
                            </div>
                        @endif
                    </div>
                </div>

                <div class="col-12">
                    <div class="form-group">
                        <label>To Date</label>
                        <input type="text" class="form-control selector @if ($errors->has('end_date')) is-invalid @endif" value="{{ old('end_date') }}" placeholder="required" id="txtToDate" name="end_date" />
                        @if ($errors->has('end_date'))
                            <div class="invalid-feedback">
                            <strong>{{ $errors->first('end_date') }}</strong>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
            <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">CANCEL</button>
            <button type="submit" class="btn btn-primary ml-3" id="btnCreatePaymentPeriod">SAVE</button>
            </div>
        </form>
      </div>
    </div>
</div>
<div class="modal" tabindex="-1" role="dialog" id="mdlDelConfirmation">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">CONFIRMATION</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body text-secondary">
            <p>Are you sure you want to delete this Payment Period and all the Payment records that belongs to this Payment Period?</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">CANCEL</button>
          <button type="button" class="btn btn-danger ml-3" id="confirmDelete">DELETE</button>
        </div>
      </div>
    </div>
@section('script')
    <script>
        $(document).ready(function() {
            notif = {
                misc: {
                navbar_menu_visible: 0
                },

                showNotification: function(from, align, color, msg) {

                $.notify({
                    icon: "now-ui-icons ui-1_bell-53",
                    message: msg

                }, {
                    type: color,
                    timer: 8000,
                    placement: {
                    from: from,
                    align: align
                    }
                });
                }
            };

            @if(session()->has('message.level'))
                notif.showNotification('top','right', '{{ session('message.level') }}', '{{ session('message.content') }}')
            @endif

            $(".selector").flatpickr();

            $('#btnAddPaymentPeriod').click(function() {
                $('#mdlAddPaymentPeriod').modal('show')
            })

            @if (count($errors) > 0)
                $('#mdlAddPaymentPeriod').modal('show');
            @endif


            let deletingIndex = 0;
        $('.btnDelete').click(function() {
            $('#mdlDelConfirmation').modal('show')
            let index = $(this).attr("id");
            deletingIndex = index.substr(2);
        })

        $('#confirmDelete').click(function() {
            loader();
            $.ajax({
                url : '{{ route( 'paymentperiod.destroy' ) }}',
                data: {
                    '_token': '{{ csrf_token() }}',
                    'id': deletingIndex,
                },
                type: 'post',
                dataType: 'json',
                success: function( result )
                {
                    if(result.code == 200) {
                        $('#mdlDelConfirmation').modal('hide');
                        $('#generalTR' + deletingIndex).remove();
                        notif.showNotification('top','right', 'success', 'Payment period and all its payment records was deleted successfully')
                    } else {
                        notif.showNotification('top','right', 'danger', 'Something went wrong. DTR entry was NOT deleted')
                    }
                    unloader();
                },
                error: function()
                {
                    notif.showNotification('top','right', 'danger', 'Something went wrong')
                }
            });
        })
        });
    </script>
@endsection
@endsection