@include('new_layouts.header')
<link href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css"
    rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" rel="stylesheet" />
<!-- Add this custom CSS for the hover functionality -->
<style>
    .badge {
    padding: 5px 10px;
    border-radius: 15px;
    margin: 2px;
    display: inline-block;
    font-size: 0.9em;
}
.badge-primary {
    background-color: #0d6efd;
    color: white;
}
.badge-info {
    background-color: #0096FF;
    color: white;
}
.badge-success {
    background-color: #198754;
    color: white;
}
.badge-warning {
    background-color: #ffc107;
    color: black;
}
    .file-list {
        display: none;
        /* Initially hide the file list */
        padding-left: 20px;
        list-style-type: none;
        background-color: #f9f9f9;
        border: 1px solid #ddd;
        border-radius: 5px;
        margin-top: 5px;
    }

    .file-list li {
        margin: 5px 0;
    }

    .file-list li a {
        text-decoration: none;
        color: #007bff;
        transition: color 0.3s ease;
    }

    .file-list li a:hover {
        color: #0056b3;
    }

    .file-list li a::before {
        content: "📄 ";
        font-size: 16px;
    }

    .file-count:hover+.file-list {
        display: block;
        /* Show the list when hovering over the file count */
    }

    td span {
        font-weight: bold;
        font-size: 14px;
        cursor: pointer;
    }

    #create {
        height: 40px !important;
        width: 100% !important;
    }

    #reset {
        width: 12% !important;
    }

    #search_button {
        height: 35px !important;
        width: 12% !important;
    }

    .dropdown-toggle::after {
        display: none;
        position: absolute;
        top: 50%;
        right: 20px;
    }

    .user-initial {
        width: 101px;
        height: 100px;
        border-radius: 50%;
        background-color: #e0e0e0;
        color: #FFF;
        font-size: 42px;
        text-align: center;
    }

    .avatar-xl {
        --tblr-avatar-size: 6.2rem;
    }

    #phone {
        cursor: pointer;
    }

    /* Custom styles for date range filter and layout */
    .filter-section {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: 20px;
    }

    .filter-section .form-control,
    .filter-section .form-select,
    .filter-section #daterange {
        width: 100%;
        /* Makes them take full width on small screens */
    }

    .filter-section .col-auto {
        flex: 1 1 calc(33% - 1rem);
        /* This makes the elements take up equal space */
    }

    @media (max-width: 768px) {
        .filter-section .col-auto {
            flex: 1 1 100%;
            /* Stacks the elements vertically on smaller screens */
        }

        .filter-section .form-control,
        .filter-section .form-select,
        .filter-section #daterange {
            width: 100%;
            /* Full width on smaller screens */
        }
    }

    :root {
        --theadColor: #206bc4;
    }

    table.dataTable {
        box-shadow: #bbbbbb 0px 0px 5px 0px;
    }

    thead {
        background-color: var(--theadColor);
    }

    thead>tr,
    thead>tr>th {
        background-color: transparent !important;
        color: #fff !important;
        font-weight: normal;
        text-align: start;
    }

    table.dataTable thead th,
    table.dataTable thead td {
        border-bottom: 0px solid #111 !important;
    }

    div.dataTables_wrapper div.dataTables_paginate {
        color: white;
    }

    .dataTables_wrapper>div {
        margin: 5px;
    }

    table.dataTable.display tbody tr.even>.sorting_1,
    table.dataTable.order-column.stripe tbody tr.even>.sorting_1,
    table.dataTable.display tbody tr.even,
    table.dataTable.display tbody tr.odd>.sorting_1,
    table.dataTable.order-column.stripe tbody tr.odd>.sorting_1,
    table.dataTable.display tbody tr.odd {
        background-color: #ffffff;
    }

    table.dataTable thead th {
        position: relative;
        background-image: none !important;
    }

    table.dataTable thead th.sorting:after,
    table.dataTable thead th.sorting_asc:after,
    table.dataTable thead th.sorting_desc:after {
        position: absolute;
        top: 12px;
        right: 8px;
        display: block;
        font-family: "Font Awesome\ 5 Free";
    }

    table.dataTable thead th.sorting:after {
        content: "\f0dc";
        color: #ddd;
        font-size: 0.8em;
        padding-top: 0.12em;
    }

    table.dataTable thead th.sorting_asc:after {
        content: "\f0de";
    }

    table.dataTable thead th.sorting_desc:after {
        content: "\f0dd";
    }

    table.dataTable.display tbody tr:hover>.sorting_1,
    table.dataTable.order-column.hover tbody tr:hover>.sorting_1 {
        background-color: #f2f2f2 !important;
        color: #000;
    }

    tbody tr:hover {
        background-color: #f2f2f2 !important;
        color: #000;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.current,
    .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
        background: none !important;
        border-radius: 50px;
        background-color: var(--theadColor) !important;
        color: #fff !important
    }

    .paginate_button.current:hover {
        background: none !important;
        border-radius: 50px;
        background-color: var(--theadColor) !important;
        color: #fff !important
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
    .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        border: 1px solid #979797;
        background: none !important;
        border-radius: 50px !important;
        background-color: #000 !important;
        color: #fff !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
        cursor: default;
        color: #fff !important;
        border: 1px solid transparent;
        background: transparent;
        box-shadow: none;
    }

    .table-responsive .bg-primary {
        background: #206bc4 !important;
    }

    /* Important part */
</style>

@php
    $profile = \App\Models\Utility::get_file('uploads/avatar/');
@endphp

<div class="page-wrapper m-3">
    <div class="card p-3">
        <div class="page-header d-print-none">
            <div class="container-fluid">
                <div class="row g-2 align-items-center">
                    <div class="col">
                        <h2 class="page-title">{{ __('Tender Projects Dashboard with Filter Options') }}</h2>
                    </div>
                    <div class="col-auto ms-auto d-print-none">
                        <div class="input-group">
                            <div class="input-group-btn d-flex">
                                <a href="{{ route('tender_distribution.index') }}" class="btn btn-primary me-2">
                                    <span class="btn-inner--icon">Tender Tracker <i class='fas fa-box'></i></span>
                                </a>
                                <a href="{{ route('tender_excel_data_import') }}" class="btn btn-primary me-2">
                                    <span class="btn-inner--icon">SC & RFQ Selection <i class='fas fa-box'></i></span>
                                </a>
                                <a href="{{ route('tender_home') }}" class="btn btn-primary me-2">
                                    <span class="btn-inner--icon">RFQ Manager <i class="fa fa-list"></i></span>
                                </a>
                           
                                {{-- <a href="{{ route('new_home') }}" class="btn btn-danger">
                                    <span class="btn-inner--icon"><i class="fa fa-arrow-left"></i> Back</span>
                                </a> --}}
                            </div>
                         </div>
                    </div>
                </div>
            </div>
        </div>
        <br>

        <div class="container-fluid">
            <div class="row row-cards">
                <div class="card">
                    <div class="card-body">
                        <div class="tab-content">
                            <div class="tab-pane active show" id="tabs-home-7" role="tabpanel">
                                <div class="col-12">
                                    <div class="row">
                                        <div class="col-md-2 border-end p-3">
                                            <form>
                                                <div class="col-md-12">
                                                    <div class="mb-3">
                                                        <label class="form-label">Select By Project Name</label>
                                                        <select id="project_name" name="project_name"
                                                            class="form-select">
                                                            <option value="">Select Project</option>
                                                            @foreach ($projects as $pro)
                                                                <option value="{{ $pro->id }}">
                                                                    {{ $pro->project_name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="col-md-12">
                                                    <div class="mb-3">
                                                        <label class="form-label required">Start Date
                                                            Date</label>
                                                        <div class="input-icon">
                                                            <span class="input-icon-addon">
                                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon"
                                                                    width="24" height="24" viewBox="0 0 24 24"
                                                                    stroke-width="2" stroke="currentColor"
                                                                    fill="none" stroke-linecap="round"
                                                                    stroke-linejoin="round">
                                                                    <path stroke="none" d="M0 0h24v24H0z"
                                                                        fill="none" />
                                                                    <path d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0
                                                                        1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0
                                                                        1 -2 -2v-12z" />
                                                                    <path d="M16 3v4" />
                                                                    <path d="M8 3v4" />
                                                                    <path d="M4 11h16" />
                                                                    <path d="M11 15h1" />
                                                                    <path d="M12 15v3" />
                                                                </svg>
                                                            </span>
                                                            <input class="form-control start_date"
                                                                placeholder="Select a End date" id="start-date" />
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="mb-3">
                                                        <label class="form-label required">End Date
                                                        </label>
                                                        <div class="input-icon">
                                                            <span class="input-icon-addon">
                                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon"
                                                                    width="24" height="24" viewBox="0 0 24 24"
                                                                    stroke-width="2" stroke="currentColor"
                                                                    fill="none" stroke-linecap="round"
                                                                    stroke-linejoin="round">
                                                                    <path stroke="none" d="M0 0h24v24H0z"
                                                                        fill="none" />
                                                                    <path d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0
                                                                1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0
                                                                1 -2 -2v-12z" />
                                                                    <path d="M16 3v4" />
                                                                    <path d="M8 3v4" />
                                                                    <path d="M4 11h16" />
                                                                    <path d="M11 15h1" />
                                                                    <path d="M12 15v3" />
                                                                </svg>
                                                            </span>
                                                            <input class="form-control end_date"
                                                                placeholder="Select a End date" id="end-date" />
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-md-12">
                                                    <div class="mb-3">
                                                        <label class="form-label">Days</label>
                                                        <input type="text" id="remaining_days" name="remaining_days"
                                                            class="form-control" placeholder="Remaining Days">
                                                    </div>
                                                </div>

                                                <div class="col-md-12">
                                                    <div class="mb-3">
                                                        <label class="form-label">Select By Status</label>
                                                        <select id="overall_status" name="overall_status" class="form-select">
                                                            <option value="">Select Status</option>
                                                            <option value="1">Ongoing</option>
                                                            <option value="2">Negotiation</option>
                                                            <option value="3">Closed</option>
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="col-12 mt-4">
                                                    <div class="mb-3">
                                                        <button type="button" id="filter_btn"
                                                            class="btn btn-tabler w-100">Filter</button>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>

                                        <div class="col-md-10"> 
                                            <div class="table-responsive card p-4">
                                                <table class="table table-vcenter card-table" id="tender_table"
                                                    aria-describedby="Tender Management">
                                                    <thead>
                                                        <tr>
                                                            <th>{{ __('#') }}</th>
                                                            <th>{{ __('Project Name') }}</th>
                                                            <th>{{ __('Received On') }}</th>
                                                            <th>{{ __('Rev') }}</th>
                                                            <th>{{ __('Tender Closing') }}</th>
                                                            <th>{{ __('Extension Date') }}</th>
                                                            <th>{{ __('Remaining Days') }}</th>
                                                            <th>{{ __('Status') }}</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@include('new_layouts.footer')

<script src="{{ asset('litepicker/litepicker.js') }}"></script>
<script>
       $(document).ready(function () {
        var table = $('#tender_table').DataTable({
            processing: true,
            serverSide: true,
            pagingType: 'full_numbers',
            aaSorting: [], // Disable initial sorting
            destroy: true,
            language: {
                sLengthMenu: "{{ __('Records per page: _MENU_') }}",
                sZeroRecords: "{{ __('No data available in table') }}",
                sEmptyTable: "{{ __('No data available in table') }}",
                sInfo: "{{ __('Showing records _START_ to _END_ of a total of _TOTAL_ records') }}",
                sInfoFiltered: "{{ __('filtering of a total of _MAX_ records') }}",
                sSearch: "{{ __('Search by Project Name...') }}:",
                oPaginate: {
                    sFirst: "{{ __('First') }}",
                    sLast: "{{ __('Last') }}",
                    sNext: "{{ __('Next') }}",
                    sPrevious: "{{ __('Previous') }}"
                }
            },
            ajax: {
                url: "{{ route('list_tender') }}",
                dataType: "json",
                type: "POST",
                data: function (d) {
                    d._token = "{{ csrf_token() }}";
                    d.project_name = $('#project_name').val();
                    d.start_date = $('#start-date').val();
                    d.end_date = $('#end-date').val();
                    d.remaining_days = $('#remaining_days').val();
                    d.overall_status = $('#overall_status').val();
                }
            },
            deferRender: true,
            pageLength: 10,
            lengthMenu: [
                [10, 25, 50, 100, 500],
                [10, 25, 50, 100, 500]
            ],
            columnDefs: [
                {
                    orderable: false,
                    targets: 0 // Disable sorting on serial number column
                },
                {
                    orderable: true,
                    targets: [1, 2, 3] // Allow sorting on selected columns
                }
            ],
            aoColumns: [
                {
                    data: null,
                 render: function (data, type, row, meta) {
                        const totalFiltered = meta.settings.json.recordsFiltered || 0;
                        return totalFiltered - (meta.row + meta.settings._iDisplayStart);
                },
                },
                { data: "project_name" },
                { data: "received_on" },
                { data: "rev" },
                { data: "dead_line" },
                { data: "extension_date" },
                { data: "remaining_days" },
                { data: "status" }
            ]
        });

        // Filter button click
        $('#filter_btn').on('click', function() {
            table.ajax.reload(); // Reload DataTable content after applying filters
        });

        // Reload the DataTable
        function reloadTable() {
            table.ajax.reload(); // Reload DataTable content
        }
    });

    document.addEventListener("DOMContentLoaded", function() {
        window.Litepicker && (new Litepicker({
            element: document.getElementById('start-date'),
            elementEnd: document.getElementById('end-date'),
            singleMode: false,
            allowRepick: true,
            buttonText: {
                previousMonth: `<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z"
                fill="none"/><path d="M15 6l-6 6l6 6" /></svg>`,

                nextMonth: `<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z"
                fill="none"/><path d="M9 6l6 6l-6 6" /></svg>`,
            },
        }));
    });
</script>