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

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

    #reset {
        width: 12% !important;
    }

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

    #download_loader{
        display: none;
    }
    #reader_loader{
        display: none;
    }


    .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>
<link href="http://hayageek.github.io/jQuery-Upload-File/4.0.11/uploadfile.css" rel="stylesheet">
@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">{{ __('Manage Tender Requests') }}</h2>
                    </div>
                </div>
            </div>
        </div>

        <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 Main Contractor</label>
                                                        <select id="main_control" name="main_control"
                                                            class="form-select">
                                                            <option value="">Select Main Control</option>
                                                            @foreach ($projects as $pro)
                                                            <option value="{{ $pro->id }}" {{ $main_con == $pro->id ? 'selected' : '' }}>
                                                                {{ $pro->name }}
                                                            </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="col-md-12 show_project" style="display: none;">
                                                    <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 Name</option>
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="col-md-12">
                                                    <div class="mb-3">
                                                        <label class="form-label required">Start 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" name="start_date"
                                                                placeholder="Select a End date" id="start-date" autocomplete="off" />
                                                        </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" name="end_date" autocomplete="off" 
                                                                id="end-date" />
                                                        </div>
                                                    </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">
                                                <div id="batch-actions-toolbar" class="d-flex align-items-center">
                                                    <button id="mark-read-btn" class="btn btn-primary mx-2">Mark as Read</button>
                                                    <img src="{{ asset('admin/loader/ajax_loader.gif') }}" id="reader_loader" class="mx-2" style="display:none;">
                                                    <button id="download-btn" class="btn btn-success mx-2">Download Attachments</button>
                                                    <img src="{{ asset('admin/loader/ajax_loader.gif') }}" id="download_loader" class="mx-2" style="display:none;">
                                                  
                                                </div>
                                               
                                                <table class="table table-vcenter card-table" id="plan_request_table"
                                                    aria-describedby="Tender Management">
                                                    <thead>
                                                        <tr>
                                                            <th><input type="checkbox" id="select-all"></th>
                                                            <th>{{ __('Main Contractor') }}</th>
                                                            <th>{{ __('Project Name') }}</th>
                                                            <th>{{ __('Quatation Request Date') }}</th>
                                                            <th>{{ __('Status') }}</th>
                                                            <th>{{ __('Action') }}</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>

                                                    </tbody>
                                                </table>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<script src="{{ asset('litepicker/litepicker.js') }}"></script>
<script src="http://hayageek.github.io/jQuery-Upload-File/4.0.11/jquery.uploadfile.min.js"></script>
<script>
    $(document).ready(function() {
        var selectedProjectId = @json($project_id);
        console.log("selectedProjectId",selectedProjectId);
    plan_request_datatable();
    setTimeout(() => {
        $('#main_control').change(); // Trigger the change on page load
    }, 2000);
  
    // Main control change handler
    $('#main_control').change(function() {
            var mainControl = $(this).val();
            $('#project_name').empty();
            $('#project_name').append('<option value="">Select Project</option>');

            if (mainControl) {
                $.ajax({
                    url: "{{ route('tender.get-projects-list', ':mainControl') }}".replace(':mainControl', mainControl),
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        $.each(data, function(key, value) {
                            $('#project_name').append('<option value="' + value.id + '">' + value.project_name + '</option>');
                        });

                        // Show the project options section
                        $(".show_project").show();

                        // Set the value of the project_name select box to the selectedProjectId
                        if (selectedProjectId) {
                            $('#project_name').val(selectedProjectId); // Set selected project
                            $('#filter_btn').trigger('click');
                        }
                    },
                    error: function() {
                        console.error('Failed to fetch projects');
                        toastr.error('Error fetching projects.');
                    }
                });
            } else {
                $(".show_project").hide(); // Hide project options if no mainControl selected
            }

            plan_request_datatable(); // Refresh the data table
        });

        if (selectedProjectId) {
            $('#project_name').val(selectedProjectId);
            $('#filter_btn').trigger('click');
        }
      
    // Project name change handler
    $('#project_name').change(function() {
        plan_request_datatable();
       
    });

    // Filter button handler
    $('#filter_btn').on('click', function() {
        plan_request_datatable();
    });

    // Select all checkboxes handler
    $('#select-all').on('click', function() {
        var isChecked = $(this).prop('checked');
        $('input.row-checkbox').prop('checked', isChecked);
    });

    // View file handler (mark as read and update UI)
    $(document).on('click', '.view-file', function(event) {
        event.preventDefault(); // Prevent default anchor behavior
        var tenderId = $(this).data('id'); // Get tender ID from data attribute

        $.ajax({
            url: '{{ route('update_tender_status') }}',
            method: 'POST',
            data: {
                tender_id: tenderId,
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                if (response.success) {
                    var row = $('#plan_request_table').find('tr[data-id="' + tenderId + '"]');
                    row.find('.status-column').html('<span style="color:green;">Read</span>');

                    row.find('.view-file').removeClass('btn-info').addClass('btn-success');
                    row.find('.view-file i').removeClass('fa-eye').addClass('fa-check');

                    var unreadCount = parseInt($('#tender_badge_sub').text()) - 1;
                    if (unreadCount > 0) {
                        $('#tender_badge_sub').text(unreadCount);
                    } else {
                        $('#tender_badge_sub').remove();
                    }

                    plan_request_datatable(); // Reload the datatable
                }
            },
            error: function(xhr, status, error) {
                console.error(error);
                toastr.error('There was an error updating the status.');
            }
        });
    });

    // Get selected rows for bulk actions
    function getSelectedRows() {
        var selectedRows = [];
        $('input.row-checkbox:checked').each(function() {
            selectedRows.push($(this).val());
        });
        return selectedRows;
    }

    // Mark selected rows as read
    $('#mark-read-btn').on('click', function() {
        var selectedRows = getSelectedRows();
        if (selectedRows.length === 0) {
            toastr.error('Please select at least one row.');
            return;
        }
        $('#reader_loader').show();
        $('#mark-read-btn').prop('disabled', true);

        $.ajax({
            url: "{{ route('tenders-read') }}",
            method: 'POST',
            data: {
                _token: $('meta[name="csrf-token"]').attr('content'),
                tender_ids: selectedRows,
                type: 'subcon'
            },
            success: function(response) {
                toastr.success('Selected tenders marked as read.');

                var validTenderCount = response.valid_tender_count;
                var unreadCount = parseInt($('#tender_badge').text()) - validTenderCount;

                if (unreadCount > 0) {
                    $('#tender_badge').text(unreadCount);
                } else {
                    $('#tender_badge').remove();
                }

                $('#select-all').prop('checked', false);
                plan_request_datatable();
                $('#reader_loader').hide();
                $('#mark-read-btn').prop('disabled', false);
            },
            error: function() {
                toastr.error('Error marking tenders as read.');
                $('#reader_loader').hide();
                $('#mark-read-btn').prop('disabled', false);
            }
        });
    });

    // Download selected tenders
    $('#download-btn').on('click', function() {
        var selectedRows = getSelectedRows();
        if (selectedRows.length === 0) {
            toastr.error('Please select at least one row.');
            return;
        }
        $('#download_loader').show();
        $('#download-btn').prop('disabled', true);

        $.ajax({
            url: "{{ route('download-tender') }}",
            method: 'POST',
            data: {
                _token: $('meta[name="csrf-token"]').attr('content'),
                tender_ids: selectedRows,
                type: 'subcon'
            },
            success: function(response) {
                window.location.href = response.download_link;
                $('#select-all').prop('checked', false);
                $('.row-checkbox').prop('checked', false);
                $('#download_loader').hide();
                $('#download-btn').prop('disabled', false);
            },
            error: function() {
                toastr.error('Error downloading attachments.');
                $('#download_loader').hide();
                $('#download-btn').prop('disabled', false);
            }
        });
    });
});


function plan_request_datatable() {
    $('#plan_request_table').dataTable().fnDestroy();
    $('#plan_request_table').DataTable({
        processing: true,
        serverSide: true,
        pagingType: 'full_numbers',
        aaSorting: [],
        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 Contractor Name, Project Name...') }}:",
            "oPaginate": {
                "sFirst": "{{ __('First') }}",
                "sLast": "{{ __('Last') }}",
                "sNext": "{{ __('Next') }}",
                "sPrevious": "{{ __('Previous') }}"
            },
        },
        "ajax": {
            "url": "{{ route('tender_sub_datatable') }}",
            "dataType": "json",
            "type": "POST",
            "data": function(d) {
                d._token = "{{ csrf_token() }}";
                d.main_control = $('#main_control').val();
                d.project_name = $('#project_name').val();
                d.start_date = $('#start-date').val();
                d.end_date = $('#end-date').val();
            }
        },
        deferRender: true,
        columnDefs: [{
                orderable: false,
                targets: 0
            },
            {
                orderable: true,
                targets: [1, 2, 3, 4, 5]
            }
        ],
        pageLength: 10,
        lengthMenu: [
            [10, 25, 50, 100, 500],
            [10, 25, 50, 100, 500]
        ],
        searching: true,
        aoColumns: [
            {data: "checkbox"},
            {data: "user_name"},
            {data: "project_name"},
            {data: "quatation_request_date"},
            {data: "status"},
            {data: "action"}
        ]
    });
}


   
    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>

@include('new_layouts.footer')