@extends('layout._default')

@section('body-con')
   
@section('title')
    Collaborations
@endsection 
    {{-- @section('breadcrumbs')
        {{ Breadcrumbs::render('user-management.users.index') }}
    @endsection --}}

    {{-- <div class="card">
        @include('pages.site-users.partial-nav')
    </div> --}}
    <br><br>
    <div class="card">

        <div class="card-body py-4">

            <div class="card-title">
                <!--begin::Search-->
                <div class="d-flex align-items-center position-relative my-1">
                    {!! getIcon('magnifier', 'fs-3 position-absolute ms-5') !!}
                    <input type="text" data-kt-user-table-filter="search" class="form-control form-control-solid w-250px ps-13" placeholder="Search" id="mySearchInput"/>
                </div>
                <!--end::Search-->
            </div>
            <div class="text-end my-1 d-flex flex-wrap">
                <div class="form-group p-1">
                    <select name="" id="status" class="form-control form-control-solid w-200px ps-13" onchange="filterData()">
                        <option value="">Status</option>
                        <option value="pending">Pending</option>
                        <option value="completed">Completed</option>
                        <option value="cancelled">Cancelled</option>
                        <option value="ongoing">Ongoing</option>
                    </select>
                </div>

                <div class="d-flex align-items-center position-relative p-1">
                    <input type="text" class="form-control form-control-solid w-200px ps-13" placeholder="Start Date" id="start_date" onfocus="(this.type='date')"
                    onblur="(this.type='text')" onchange="filterData()"/>
                </div>

                <div class="d-flex align-items-center position-relative p-1">
                    <input type="text" class="form-control form-control-solid w-200px ps-13" placeholder="End Date" id="end_date" onfocus="(this.type='date')"
                    onblur="(this.type='text')" onchange="filterData()"/>
                </div>

            </div>

            
            <!--begin::Table-->
            <div class="table-responsive">
                {{ $dataTable->table() }}
                <div id="total_records"></div>
                
            </div>
            <!--end::Table-->
        </div>
    </div>
@endsection

@push('scripts')
    {{ $dataTable->scripts() }}
    <script>
        var recordType = 'collaborations';
        document.getElementById('mySearchInput').addEventListener('keyup', function () {
            window.LaravelDataTables['site-users-table-'+recordType].search(JSON.stringify({ "status": document.getElementById('status').value, 
            "search": document.getElementById('mySearchInput').value, "start_date": document.getElementById('start_date').value, "end_date": document.getElementById('end_date').value})).draw();
        });

        function filterData()
        {

            var startDateInput = document.getElementById('start_date');
            var endDateInput = document.getElementById('end_date');
            
            // Parse the date strings to Date objects
            var startDate = new Date(startDateInput.value);
            var endDate = new Date(endDateInput.value);

            // Compare start date with end date
            if (startDate > endDate) {
                Swal.fire({
                    text: "Start Date Cannot Be Greater Than End Date",
                    icon: "error",
                    buttonsStyling: false,
                    confirmButtonText: "Close!",
                    customClass: {
                        confirmButton: "btn btn-primary"
                    }
                });
                return;
                // Clear the end date input value
                endDateInput.value = '';
            }


            window.LaravelDataTables['site-users-table-'+recordType].search(JSON.stringify({ "status": document.getElementById('status').value,
            "search": document.getElementById('mySearchInput').value, "start_date": document.getElementById('start_date').value, "end_date": document.getElementById('end_date').value})).draw();
        }


    </script>

        
@endpush