@extends('layouts.app')

@section('page-title')
    <div class="row bg-title">
        <!-- .page title -->
        <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
            <h4 class="page-title"><i class="{{ $pageIcon }}"></i> @lang($pageTitle)</h4>
        </div>
        <!-- /.page title -->
        <!-- .breadcrumb -->
        <div class="col-lg-9 col-sm-8 col-md-8 col-xs-12 text-right" style="margin-left:1300px;">
            <ol class="breadcrumb">
                <li><a href="{{ route('dashboard') }}">@lang('app.menu.home')</a></li>
                <li><a href="{{ route('payments.index') }}">@lang($pageTitle)</a></li>
                <li class="active">@lang('app.addNew')</li>
            </ol>
        </div>
        <!-- /.breadcrumb -->
    </div>
@endsection

@push('head-script')
    <link rel="stylesheet" href="{{ asset('plugins/bower_components/custom-select/custom-select.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/bower_components/bootstrap-select/bootstrap-select.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/bower_components/switchery/dist/switchery.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/datetime-picker/datetimepicker.css') }}">
    <link rel="stylesheet" href="{{ asset('css/datatables/dataTables.bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ asset('css/datatables/responsive.bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ asset('css/datatables/buttons.dataTables.min.css') }}">
    <style>
        #projects-table_wrapper .dt-buttons {
            display: none !important;
        }

        .row.bg-title a.btn.btn-outline {
            margin-bottom: 10px;
        }
    </style>
@endpush

@section('content')
    <div class="dash_panel">
        <div class="customCard">
            <div class="row">
                <div class="col-md-12 ">
                    <form id="storePayments" class="ajax-form" method="POST">
                        @csrf
                        <div class="row align-items-end justify-content-end" style="padding-bottom:15px;">

                            <div class="col-md-2">
                                <div class="form-group">
                                    <label>@lang('modules.lead.status')</label>
                                    <select name="status" id="status" class="form-control selectpicker">
                                        <option selected value="all">@lang('app.all')</option>
                                        <option value="danger" data-content="<span style='background:#fb9678;padding:2px 8px;border-radius:4px;'>Before 30 days</span>">
                                            Before 30 days
                                        </option>

                                        <option value="warning" data-content="<span style='background:#fec107;padding:2px 8px;border-radius:4px;'>Before 15 days</span>">
                                            Before 15 days
                                        </option>

                                        <option value="success" data-content="<span style='background:#00c292;padding:2px 8px;border-radius:4px;'>Under 15 days</span>">
                                            Under 15 days
                                        </option>

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

                            <div class="col-md-2">
                                <div class="form-group">
                                    <label class="control-label">@lang('app.projectManager')</label>
                                    <select class="select2 form-control" data-placeholder="@lang('app.projectManager')" id="manager_id">
                                        <option selected value="all">@lang('app.all')</option>
                                        @foreach ($managers as $manager)
                                            <option value="{{ $manager->user->id }}">{{ $manager->user->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="col-xs-12 col-md-2 mb-0">
                                <div class="example">
                                    <h5 class="box-title">@lang('app.selectDateRange')</h5>
                                    <div class="input-daterange input-group dataRangeWidth" id="date-range">
                                        <input type="text" readonly class="form-control" id="start-date" placeholder="@lang('app.startDate')" value="" />
                                        <span class="input-group-addon bg-info b-0 text-white">@lang('app.to')</span>
                                        <input type="text" readonly class="form-control" id="end-date" placeholder="@lang('app.endDate')" value="" />
                                    </div>
                                </div>
                            </div>

                            <div class="col-xs-12 col-md-3 mb-0 d-flex gap-3">
                                <button type="button" class="w-100 themeBtn " id="filter-results">@lang('app.apply')</button>
                                <button type="button" id="reset-filters" class="w-100 themeBtnOutline ">@lang('app.reset')</button>
                            </div>
                        </div>
                    </form>
                    <div class="white-box">
                        <div class="table-responsive">
                            {!! $dataTable->table([
                                'class' => 'table table-bordered table-hover toggle-circle default footable-loaded footable',
                            ]) !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- .row -->
@endsection


@push('footer-script')
    <script src="{{ asset('plugins/bower_components/custom-select/custom-select.min.js') }}"></script>
       <script src="{{ asset('plugins/bower_components/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('js/datatables/dataTables.bootstrap.min.js') }}"></script>
    <script src="{{ asset('js/datatables/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('js/datatables/responsive.bootstrap.min.js') }}"></script>
    <script src="{{ asset('plugins/bower_components/bootstrap-select/bootstrap-select.min.js') }}"></script>
    <script src="{{ asset('plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>
    <script src="{{ asset('plugins/bower_components/switchery/dist/switchery.min.js') }}"></script>
    <script src="{{ asset('plugins/bower_components/moment/moment.js') }}"></script>
    <script src="{{ asset('plugins/datetime-picker/datetimepicker.js') }}"></script>
    <script src="{{ asset('js/datatables/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('js/datatables/buttons.server-side.js') }}"></script>
    <script src="{{ asset('plugins/bower_components/timepicker/bootstrap-timepicker.min.js') }}"></script>
    <script src="{{ asset('plugins/bower_components/bootstrap-daterangepicker/daterangepicker.js') }}"></script>


    {!! $dataTable->scripts() !!}

<script>

    $(".select2").select2({
        allowClear: true,
        formatNoMatches: function () {
            return "{{ __('messages.noRecordFound') }}";
        }
    });

    $('.selectpicker').selectpicker();

    jQuery('#paid_on').datetimepicker({
        format: 'D/M/Y HH:mm',
    });

    jQuery('#date-range').datepicker({
        format: '{{ $global->date_picker_format }}',
        toggleActive: true,
    });

    $('#save-form-2').click(function () {
        $.easyAjax({
            url: '{{route('payments.store')}}',
            container: '#createPayment',
            type: "POST",
            redirect: true,
            file: true,
            data: $('#createPayment').serialize()
        })
    });

    $('#resetForm').click(function(){
        $(".select2").select2("val", "");
    });

    $('#payment-module-table').on('preXhr.dt', function (e, settings, data) {
        var startDate = $('#start-date').val();

        if(startDate == ''){
            startDate = null;
        }

        var endDate = $('#end-date').val();

        if(endDate == ''){
            endDate = null;
        }
        var managerId = $('#manager_id').val();

        data['startDate'] = startDate;
        data['endDate'] = endDate;
        data['managerId'] = managerId;
        data['status'] = $('#status').val();

    });

    function showTable(){
        window.LaravelDataTables["payment-module-table"].draw();
    }

    $('#filter-results').click(function () {
        let todayFormatted = "{{ \Carbon\Carbon::today()->format($global->date_format) }}";
        showTable();
    });

    $('#reset-filters').click(function () {  
        $('.select2').val('all');
        $('.selectpicker').selectpicker('val', 'all');
        $('.select2').trigger('change');      
        $('#start-date').val('');
        $('#end-date').val('');
        showTable();
    })
</script>
@endpush