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

<link href="https://cdn.jsdelivr.net/npm/dropzone@5.9.3/dist/min/dropzone.min.css" rel="stylesheet">

<style>
    #create {
        height: 40px !important;
        width: 100% !important;
    }
    #download_loader{
        display: none;
    }
    #reader_loader{
        display: none;
    }

    #reset {
        width: 12% !important;
    }

    div#choices_multiple1_chosen {
        width: 100% !important;
        border-color: #e6e7e9 !important;
    }

    div#choices_multiple2_chosen {
        width: 100% !important;
        border-color: #e6e7e9 !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;
    }

    .status-badge {
        display: block;        /* Makes each span a block-level element */
        margin-bottom: 10px;   /* Adds space between each span */
    }

    /* 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 Tracker Status 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.create') }}" class="btn btn-primary me-2" title="{{ __('Create New Tender') }}" id="create">
                                    <span class="btn-inner--icon">Add Tender <i class="fa fa-plus"></i></span>
                                </a>
                                <a href="{{ route('tender_management') }}" 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">Select By Incharge</label>
                                                        <select id="incharge" name="incharge" class="form-select">
                                                            <option value="">Select Incharge</option>
                                                            @foreach ($incharge as $user)
                                                                <option value="{{ $user->id }}">
                                                                    {{ $user->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>{{ __('Project Status') }}</th>
                                                            <th>{{ __('Tracker Status') }}</th>
                                                            <th>{{ __('Action') }}</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                    </tbody>
                                                </table>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>


@include('new_layouts.footer')
<script src="{{ asset('litepicker/litepicker.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/dropzone@5.9.3/dist/min/dropzone.min.js"></script>
<script>
    $(document).ready(function() {

        $('#choices-multiple2').on('change', function() {
            var selectedSubDivisions = $(this).val(); // Get the selected sub-divisions

            if (selectedSubDivisions && selectedSubDivisions.length > 0) {
                // Enable the sub-contractor dropdown
                $('#sub_contractor').prop('disabled', false);

                // Make the AJAX call to fetch sub-contractors based on selected sub-divisions
                $.ajax({
                    url: '{{ route('getSubContractors') }}', // Backend route
                    method: 'GET',
                    data: {
                        sub_divison_id: selectedSubDivisions,
                    },
                    success: function(response) {
                        // Clear previous options
                        $('#sub_contractor').empty().append(
                            '<option value="">Select Sub-contractor</option>');

                        // If sub-contractors are found, populate the dropdown
                        if (response.length > 0) {
                            $.each(response, function(index, user) {
                                $('#sub_contractor').append('<option value="' + user
                                    .id + '">' + user.name + '</option>');
                            });
                        } else {
                            $('#sub_contractor').append(
                                '<option value="" disabled>No Sub-contractors found</option>'
                                );
                        }
                    },
                    error: function(xhr, status, error) {
                        console.log("Error:", error);
                        // Handle error if needed
                    }
                });
            } else {
                // If no sub-division is selected, disable the sub-contractor dropdown
                $('#sub_contractor').prop('disabled', true);
                $('#sub_contractor').empty().append('<option value="">Select Sub-contractor</option>');
            }
        }); 

        // 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('table_distribution') }}",
                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
                    d.overall_status = $('#overall_status').val(); // Include remaining_days
                    // d.incharge = $("#incharge").val();
                }
            },
            deferRender: true,
           columnDefs: [
            {
                targets: 0,
                orderable: false,
                render: function (data, type, row, meta) {
                    return meta.row + meta.settings._iDisplayStart + 1;
                }
            },
            {
                orderable: true,
                targets: [1, 2, 3]
            }
            ],
            pageLength: 10,
            lengthMenu: [
                [10, 25, 50, 100, 500],
                [10, 25, 50, 100, 500]
            ],
            searching: true,
            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" },
                { data: "tenderTrackerStatus" },
                { data: "action" }
            ]
        });

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

        // Check sessionStorage for the update flag
        if (sessionStorage.getItem('dataUpdated') === 'true') {
            // Reload the DataTable
            table.ajax.reload(null, false);  // Reload without changing the page

            // Optionally, remove the sessionStorage flag after reloading
            sessionStorage.removeItem('dataUpdated');
        }

        // Handle Sub-contractor dropdown change
        $('#project_name').change(function() {
            var projectId = $(this).val();
            $('#sub_contractor').empty().append('<option value="">Select Sub-contractor</option>').prop(
                'disabled', !projectId);

            if (projectId) {
                $.ajax({
                    url: "{{ route('tender.get-subcontractors-list', ':projectId') }}".replace(
                        ':projectId', projectId),
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        $('#sub_contractor').prop('disabled', false); // Enable dropdown
                        $.each(data, function(key, value) {
                            $('#sub_contractor').append('<option value="' + value
                                .id + '">' + value.name + '</option>');
                        });
                        reloadTable(); // Reload table after project/sub-contractor change

                        $(".show_subcon").show();
                    },
                    error: function() {
                        console.error('Failed to fetch sub-contractors');
                    }
                });
            } else {
                reloadTable(); // Reload table if no project is selected
                $(".show_subcon").hide();
            }
        });
    });


    $(".chosen-select").chosen({
        placeholder_text: "{{ __('Reporting to') }}"
    });
    
    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>