@extends('university.layouts.layout')
@section('content')
    <div class="pxp-dashboard-content-details">
        <h1>Unpaid Programs</h1>
        <p class="pxp-text-light">Detailed list of your unpaid programs.</p>

        <div class="mt-4 mt-lg-5">
            <div class="row justify-content-between align-content-center">
                <div class="col-md-12">
                    <div class="pxp-candidate-dashboard-jobs-bulk-actions mb-3">

                        <select class="form-select">
                            <option value="">Select Program</option>
                            @foreach ($programs as $item)
                                <option value="{{ $item->id }}">
                                    {{ strlen($item->program_title) > 60 ? substr($item->program_title, 0, 60) : $item->program_title }}
                                </option>
                            @endforeach
                        </select>

                        &nbsp;&nbsp;
                         <input type="date" class="form-control flatpickr-input" wire:model="startDate" id="start_date" style="">
                         &nbsp;&nbsp;
                         <input type="date" class="form-control flatpickr-input" wire:model="endDate" id="end_date">
                        <button class="btn ms-2">Apply</button>
                    </div>
                </div>

               <div class="col-md-12">
                    <div class="pxp-candidate-dashboard-jobs-search mb-3">
                        <div class="pxp-candidate-dashboard-jobs-search-results me-3">Programs</div>
                        <div class="pxp-candidate-dashboard-jobs-search-search-form">
                            <div class="input-group">
                                <span class="input-group-text"><span class="fa fa-search"></span></span>
                                <input type="text" class="form-control" placeholder="Search jobs...">
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <!-- <table id="ajax-datatables" class="display table table-bordered dt-responsive nowrap">
                <thead>
                    <tr>
                        
                    </tr>
                </thead>
            </table> -->
            <div class="table-responsive">
                <table id="example1" class="table table-hover align-middle">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Program Title</th>
                            <th>Education Level</th>
                            <th>Minimum GPA</th>
                            <th>Program Level</th>
                            <th>Program Apply Date</th>
                            <th>Payment</th>
                            <th>Student</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td colspan="8" class="text-center" style="font-weight: 600;">No record found</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection


@section('pagescriptcode')
<script>


    /*function reload_datatable() {
        var purchase_ids = [];
        $("#purchase_ids option:selected").each(function() {
            purchase_ids.push($(this).val());
        });

        var string_purchase_ids = '';
        if (purchase_ids.length > 0) {
            string_purchase_ids = purchase_ids.join(",");
        }

        var startdate = $("#startdate").val();
        if (startdate == null) {
            var startdate = '';
        }

        var enddate = $("#enddate").val();
        if (enddate == null) {
            var enddate = '';
        }

        if (enddate == '') {
            if (startdate != '') {
                Swal.fire("Warning", "Please select end date", "warning");
                return false;
            }
        }

        if (startdate == '') {
            if (enddate != '') {
                Swal.fire('Warning', 'Please select strat date', "warning");
                return false;
            }
        }

        $("#ajax-datatables").dataTable().fnDestroy();
        $('#ajax-datatables').DataTable({
            bAutoWidth: false,
            serverSide: true,
            order: [
                [0]
            ],
            dom: `<"top"<"datatable_filter"<"toolbar">>f>t<"bottom"lip><"clear">`,
            ajax: {
                // url: "{{env('API_URL').'purchase_list'}}",
                url: "",
                type: 'POST',
                data: {
                    "_token": "{{ csrf_token() }}",
                    startdate: startdate,
                    enddate: enddate,
                    string_purchase_ids: string_purchase_ids,
                },
            },
            "fnDrawCallback": function() {
                $('[data-toggle="tooltip"]').tooltip();
            },
            columns: [
                // { data: 'id', title: 'Action' },
                {
                    data: null,
                    title: 'Actions',
                    render: function(data, type, row) {
                        var actions = '';

                        actions += "&nbsp;<a href=\"" + url + "/purchase/view/" + btoa('view/'+row.id) + "\" " +
                            "class=\"btn btn-action btn-outline-success\" data-toggle=\"tooltip\" title=\"View\">" +
                            "<i class=\"ri-eye-line\"></i></a>";


                        return actions;
                    }
                }
            ],
            'columnDefs': [ {
                'targets': [0], 
                'orderable': false,
            }]
        });
    }
    reload_datatable();*/

</script>
@endsection