@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 Dashboard') }}</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.index') }}" class="btn btn-primary me-2">
                                    <span class="btn-inner--icon">View Overall Tender <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-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>{{ __('Ongoing Tenders') }}</th>
                                                            <th>{{ __('Submission Date') }}</th>
                                                            <th>{{ __('Remaining Days') }}</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                        <div style="max-height: 400px; overflow-y: auto;">
                                            <table class="table table-vcenter card-table">
                                                <thead>
                                                    <tr>
                                                        <th class="text-left">Project Name</th>
                                                        <th class="text-center">Cut-off Date</th>
                                                        <th class="text-left">Subcontractor</th>
                                                        <th class="text-left">RFQ Trade</th>
                                                        <th class="text-center">RFQ Issued</th>
                                                        <th class="text-center">Quotation Received</th>
                                                        <th class="text-center">Quotation Pending</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @forelse ($tenders as $tender)
                                                        @php
                                                            $mainTenderIds = $tender['main_tender_ids'];
                                                            $subTenderIds = $tender['sub_division_ids'];
                                                            
                                                            $categories = DB::table('trade_category')
                                                                ->whereIn('id', $mainTenderIds)
                                                                ->get();
                                                                
                                                            $divisions = DB::table('tender_divisions')
                                                                ->whereIn('trade_id', $mainTenderIds)
                                                                ->whereIn('id', $subTenderIds)
                                                                ->get();
                                                            
                                                            // Get RFQ counts
                                                            $rfqCounts = DB::table('tender_subcon_allocated AS t')
                                                                ->select([
                                                                    DB::raw('TRIM(BOTH \'"\' FROM j.trade_id) as main_trade_id'),
                                                                    DB::raw('COUNT(DISTINCT t.subcon_id) as number_of_subcontractors')
                                                                ])
                                                                ->where('tender_id', $tender['id'])
                                                                ->where('t.subcon_id', '!=', 0)
                                                                ->crossJoin(DB::raw('JSON_TABLE(
                                                                    CONCAT(\'[\', REPLACE(SUBSTRING(main_trade, 2, LENGTH(main_trade) - 2), \',\', \',\'), \']\'),
                                                                    \'$[*]\' COLUMNS (trade_id VARCHAR(10) PATH \'$\')
                                                                ) as j'))
                                                                ->groupBy('j.trade_id')
                                                                ->orderBy('j.trade_id')
                                                                ->get()
                                                                ->keyBy('main_trade_id');
                                        
                                                            // Get received quotation counts
                                                            $receivedCounts = DB::table('tender_subcon_allocated AS t')
                                                                ->select([
                                                                    DB::raw('TRIM(BOTH \'"\' FROM j.trade_id) as main_trade_id'),
                                                                    DB::raw('COUNT(DISTINCT CASE WHEN t.subcon_file_id IS NOT NULL THEN t.subcon_id END) as received_count')
                                                                ])
                                                                ->where('tender_id', $tender['id'])
                                                                ->where('t.subcon_id', '!=', 0)
                                                                ->crossJoin(DB::raw('JSON_TABLE(
                                                                    CONCAT(\'[\', REPLACE(SUBSTRING(main_trade, 2, LENGTH(main_trade) - 2), \',\', \',\'), \']\'),
                                                                    \'$[*]\' COLUMNS (trade_id VARCHAR(10) PATH \'$\')
                                                                ) as j'))
                                                                ->groupBy('j.trade_id')
                                                                ->orderBy('j.trade_id')
                                                                ->get()
                                                                ->keyBy('main_trade_id');
                                                            
                                                            // Calculate project totals
                                                            $project_total_rfq = $rfqCounts->sum('number_of_subcontractors');
                                                            $project_total_received = $receivedCounts->sum('received_count');
                                                            $project_total_pending = $project_total_rfq - $project_total_received;
                                                        @endphp
                                                        
                                                        @if ($categories->count() > 0 || $divisions->count() > 0)
                                                            <tr>
                                                                <td rowspan="{{ $categories->count() + 2 }}" class="align-middle">
                                                                    {{ $tender['project_name'] }}
                                                                </td>
                                                                <td rowspan="{{ $categories->count() + 2 }}" class="text-center align-middle">
                                                                    {{ Utility::site_date_format($tender['dead_line'], \Auth::user()->id) }}
                                                                </td>
                                                                <td rowspan="{{ $categories->count() + 2 }}" class="align-middle">
                                                                    @foreach ($tender['sub_con_details'] as $sub_con)
                                                                        <span class="badge badge-primary">{{ DB::table('users')->where('id', $sub_con)->value('name') }}</span>
                                                                    @endforeach
                                                                </td>
                                                            </tr>
                                                            
                                                            <tr class="bg-light">
                                                                <td class="font-weight-bold">All Trade RFQ Total</td>
                                                                <td class="text-center">
                                                                    @if($project_total_rfq > 0)
                                                                        <span class="badge badge-info">{{ $project_total_rfq }}</span>
                                                                    @else
                                                                        <span class="text-muted">-</span>
                                                                    @endif
                                                                </td>
                                                                <td class="text-center">
                                                                    @if($project_total_received > 0)
                                                                        <span class="badge badge-success">{{ $project_total_received }}</span>
                                                                    @else
                                                                        <span class="text-muted">-</span>
                                                                    @endif
                                                                </td>
                                                                <td class="text-center">
                                                                    @if($project_total_pending > 0)
                                                                        <span class="badge badge-warning">{{ $project_total_pending }}</span>
                                                                    @else
                                                                        <span class="text-muted">-</span>
                                                                    @endif
                                                                </td>
                                                            </tr>
                                                            
                                                            @foreach ($categories as $cat)
                                                                @php
                                                                    $count_total = isset($rfqCounts[$cat->id]) ? $rfqCounts[$cat->id]->number_of_subcontractors : 0;
                                                                    $count_total_received = isset($receivedCounts[$cat->id]) ? $receivedCounts[$cat->id]->received_count : 0;
                                                                    $count_pending = $count_total - $count_total_received;
                                                                @endphp
                                                                
                                                                <tr>
                                                                    <td class="font-weight-bold">{{ $cat->trade_name }}</td>
                                                                    <td class="text-center">
                                                                        @if($count_total > 0)
                                                                            <span class="badge badge-info">{{ $count_total }}</span>
                                                                        @else
                                                                            <span class="text-muted">-</span>
                                                                        @endif
                                                                    </td>
                                                                    <td class="text-center">
                                                                        @if($count_total_received > 0)
                                                                            <span class="badge badge-success">{{ $count_total_received }}</span>
                                                                        @else
                                                                            <span class="text-muted">-</span>
                                                                        @endif
                                                                    </td>
                                                                    <td class="text-center">
                                                                        @if($count_pending > 0)
                                                                            <span class="badge badge-warning">{{ $count_pending }}</span>
                                                                        @else
                                                                            <span class="text-muted">-</span>
                                                                        @endif
                                                                    </td>
                                                                </tr>
                                                            @endforeach
                                                        @endif
                                                    @empty
                                                        <tr>
                                                            <td colspan="7" class="text-center">No data available</td>
                                                        </tr>
                                                    @endforelse
                                                </tbody>
                                            </table>
                                        </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() {
        // Initialize DataTable only once
        var table = $('#tender_table').DataTable({
            processing: true,
            serverSide: true,
            pagingType: 'full_numbers',
            aaSorting: [], // Disable default 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(); // Updated field
                    d.end_date = $('#end-date').val(); // Updated field
                    d.remaining_days = $('#remaining_days').val(); // Include remaining_days
                }
            },
            deferRender: true,
            columnDefs: [{
                    orderable: false,
                    targets: 0
                },
                {
                    orderable: true,
                    targets: [1, 2, 3]
                }
            ],
            pageLength: 10,
            lengthMenu: [
                [10, 25, 50, 100, 500],
                [10, 25, 50, 100, 500]
            ],
            searching: true,
            aoColumns: [{
                    data: "id"
                },
                {
                    data: "project_name"
                },
                {
                    data: "dead_line"
                },
                {
                    data: "remaining_days"
                }
            ]
        });

        // 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>