@extends('university.layouts.layout')
@section('content')
    <div class="pxp-dashboard-content-details">
        <h1>New Programs</h1>
        <p class="pxp-text-light">Detailed list of your New 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>
            <div class="table-responsive">
                <table id="example1" class="table table-hover align-middle">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Program Title</th>
                            <th>Application Number</th>
                            <th>Application Status</th>
                            <th>Created At</th>
                            <th>Payment</th>
                            <th>Student</th>
                            <th>Agent</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td colspan="9" class="text-center" style="font-weight: 600;">No record found</td>
                        </tr>
                    </tbody>
                </table>

            </div>
        </div>
    </div>
@endsection