@include('new_layouts.header')
@push('css-page')
<link rel="stylesheet" href="{{ asset('assets/css/datatables.min.css') }}">
<link rel='stylesheet' href='https://unicons.iconscout.com/release/v3.0.6/css/line.css'>
<link rel="stylesheet" href="{{ asset('assets/libs/fullcalendar/dist/fullcalendar.min.css') }}">
<link rel="stylesheet" href="{{ asset('tokeninput/tokeninput.css') }}">
<link href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css" rel="stylesheet"/>
<style>
    .ellipsis_task {
        width: auto;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        word-break: break-all;
    }
    td[rowspan] {
        vertical-align: middle;
        background: #f9f9f9;
        font-weight: 500;
    }

    .custom-checkbox .checkmark {
        width: 25px;  /* Increase the width */
        height: 25px; /* Increase the height */
        border: 2px solid #ddd;
        border-radius: 5px;
        display: inline-block;
        position: relative;
        transition: background-color 0.3s ease;
    }

    /* Checked state */
    .custom-checkbox input[type="checkbox"]:checked + .checkmark {
        background-color: #007bff;
        border-color: #007bff;
    }

    /* Checkmark symbol inside the box */
    .custom-checkbox input[type="checkbox"]:checked + .checkmark:after {
        content: '✓';
        position: absolute;
        top: 0;
        left: 5px;
        color: white;
        font-size: 20px; /* Size of the checkmark */
    }
    .custom-checkbox input[type="checkbox"] {
        display: none;
    }

    div#get_manincharge_chosen {
        width: 215px !important;
    }
</style>
@include('construction_project.side-menu')
    <section>
        <div class="page-wrapper">
            <div class="container-fluid" id="taskboard_view">
                <div class="p-2">
                    <div class="card">
                        <div class="col-12">
                            <div class="card-header">
                                <ul class="nav nav-tabs card-header-tabs nav-fill p-0"
                                data-bs-toggle="tabs" role="tablist">
                                    <li class="nav-item" role="presentation">
                                        <a href="#tabs-home-7" class="nav-link active" data-bs-toggle="tab"
                                        aria-selected="true" role="tab">
                                            <svg xmlns="http://www.w3.org/2000/svg"
                                            class="icon icon-tabler  me-2 icon-tabler-calendar-star" 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>
                                                <path
                                                d="M11 21h-5a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v3.5">
                                                </path>
                                                <path d="M16 3v4"></path>
                                                <path d="M8 3v4"></path>
                                                <path d="M4 11h11"></path>
                                                <path
                                                d="M17.8 20.817l-2.172 1.138a.392 .392 0 0 1 -.568 -.41l.415
                                                -2.411l-1.757 -1.707a.389 .389 0 0 1 .217 -.665l2.428 -.352l1.086
                                                -2.193a.392 .392 0 0 1 .702 0l1.086 2.193l2.428 .352a.39 .39 0 0
                                                1 .217 .665l-1.757 1.707l.414 2.41a.39 .39 0 0 1 -.567
                                                .411l-2.172 -1.138z"></path>
                                            </svg>
                                            {{ __('SC Selection List') }}
                                        </a>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <a href="#tabs-profile-7" class="nav-link" data-bs-toggle="tab"
                                        aria-selected="false" tabindex="-1" role="tab">
                                            <svg xmlns="http://www.w3.org/2000/svg"
                                            class="icon icon-tabler me-2 icon-tabler-calendar-up" 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>
                                                <path d="M12.5 21h-6.5a2 2 0 0 1 -2 -2v-12a2 2 0 0 1
                                                2 -2h12a2 2 0 0 1 2 2v5"></path>
                                                <path d="M16 3v4"></path>
                                                <path d="M8 3v4"></path>
                                                <path d="M4 11h16"></path>
                                                <path d="M19 22v-6"></path>
                                                <path d="M22 19l-3 -3l-3 3"></path>
                                            </svg>
                                            {{ __('RFQ Selection List') }}
                                        </a>
                                    </li>
                                </ul>
                            </div>

                            <section class="wrappers loader_show_hide" style="display: none;">
                                <div class="cards">
                                    <div class="loader">
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    </div>
                                </div>
                            </section>

                            <div class="">
                                <div class="tab-content">
                                    <div class="tab-pane active show" id="tabs-home-7" role="tabpanel">
                                        <div class="col-12">
                                            <div class="card">
                                                <div class="card-header">
                                                    <h4 class="card-title">{{ __('SC Selection List') }}</h4>
                                                </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_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 me-2">
                                                                <span class="btn-inner--icon"><i class="fa fa-arrow-left"></i> Back</span>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="card-body">
                                                    <div class="row">
                                                        <div class="col-12">
                                                            <div class="card">
                                                                <div class="card-body table-border-style">
                                                                    <div class="card-body">
                                                                        <form id="importForm" enctype="multipart/form-data">
                                                                            @csrf
                                                                            <div class="row">
                                                                                <span>Upload your SC list using our Excel template. The following fields are
                                                                                    required in the xlsx: <strong>SUBGROUP, DIVISION, SUBDIVISION, COMPANY NAME,
                                                                                        CONTACT PERSON, CONTACT NO, SC EMAIL TO, SC EMAIL CC.</strong></span>
                                                                                <br>
                                                                                <div class="col-md-3 mb-3">
                                                                                    <div class="form-group">
                                                                                        <label for="actionSelect">{{ __('Select Action') }}</label>
                                                                                        <select id="actionSelect" class="form-control">
                                                                                            <option value="select">Select Type</option>
                                                                                            <option value="download">Download Sample Excel Template to Update SC List</option>
                                                                                            <option value="import">Import SC List</option>
                                                                                        </select>
                                                                                    </div>
                                                                                </div>

                                                                                <div class="col-md-3 mb-3" id="importSection" style="display: none;">
                                                                                    <div class="form-group">
                                                                                        <label for="file">{{ __('Choose File') }}</label>
                                                                                        <div class="input-group">
                                                                                            <input type="file" class="form-control" accept=".xlsx, .xls" id="file" name="file">
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                        
                                                                                <div class="col-md-3 mb-3 d-flex align-items-end">
                                                                                    <div class="form-group ml-auto" style="display: none;" id="importsave">
                                                                                        <img src="{{ asset('admin/loader/ajax_loader.gif') }}" id="loader" class="ml-3">
                                                                                        <button class="btn btn-primary ml-3" type="submit">Upload SC Selection</button>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                            <div class="row">
                                                                                <div class="col-md-3 mb-3 d-flex align-items-end">
                                                                                    <div class="input-group-append" id="downloadSection" style="display: none;">
                                                                                        <a class="btn btn-primary ml-3" id="import_excel" href="{{ route('tender_excel_data_export') }}">
                                                                                            <i class="fa fa-download"></i> Download Sample Excel Template to Update SC List
                                                                                        </a>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </form>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-12">
                                                            <div class="table-responsive card p-1" id="all_task_append">
                                                                <table class="table table-vcenter card-table" id="sc_selection-table" aria-describedby="Sub Task">
                                                                    <thead>
                                                                        <tr>
                                                                            <th scope="col" style="color: white;">{{__('SUBGROUP')}}</th>
                                                                            <th scope="col" style="color: white;">{{__('DIVISION')}}</th>
                                                                            <th scope="col" style="color: white;">{{__('SUBDIVISION')}}</th>
                                                                            <th scope="col" style="color: white;">{{__('COMPANY')}}</th>
                                                                            <th scope="col" style="color: white;">{{__('SC email')}}</th>
                                                                            <th scope="col" style="color: white;">{{__('SC CC email')}}</th>
                                                                        </tr>
                                                                    </thead>
                                                                </table>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="tab-pane" id="tabs-profile-7" role="tabpanel">
                                        <div class="col-12">
                                            <div class="card">
                                                <div class="card-header">
                                                    <h4 class="card-title">{{ __('RFQ Selection List') }}</h4>
                                                </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_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 me-2">
                                                                <span class="btn-inner--icon"><i class="fa fa-arrow-left"></i> Back</span>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="card-body">
                                                    <div class="row">
                                                        <div class="col-12">
                                                            <div class="card">
                                                                <div class="card-body table-border-style">
                                                                    <div class="card-body">
                                                                        <form enctype="multipart/form-data">
                                                                            @csrf
                                                                            <div class="row">
                                                                                <div class="col-md-3 mb-3">
                                                                                    <div class="form-group">
                                                                                        <label for="actionSelect">{{ __('Tender') }}</label>
                                                                                        <select id="tender_id" class="form-control">
                                                                                            <option value="select">Select Tender</option>
                                                                                            @foreach($projects as $tender)
                                                                                                <option value="{{$tender->id}}">{{ $tender->project_name}}</option>
                                                                                            @endforeach
                                                                                        </select>
                                                                                    </div>
                                                                                </div>

                                                                                <div class="col-md-3 mb-3">
                                                                                    <div class="form-group">
                                                                                        <label style="margin-bottom: 8px;" for="actionSelect">{{ __('CC / BCC') }}</label>
                                                                                        <select id="get_manincharge" style="width: 100px;" class="form-control chosen-select get_manincharge" name="incharge_id[]" multiple="true">
                                                                                            @foreach ($incharge as $charge)
                                                                                                <option value="{{ $charge->id }}">{{ $charge->name }}</option>
                                                                                            @endforeach
                                                                                        </select>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </form>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-12">
                                                            <div class="table-responsive card p-4">
                                                                <table class="table table-vcenter card-table"
                                                                id="rfq_selection-table" aria-describedby="Main Task"
                                                                style="width: 100%">
                                                                    <thead>
                                                                        <tr>
                                                                            <th scope="col" style="color: white;">{{__('Selection')}}</th>
                                                                            <th scope="col" style="color: white;">{{__('SUBGROUP')}}</th>
                                                                            <th scope="col" style="color: white;">{{__('DIVISION')}}</th>
                                                                            <th scope="col" style="color: white;">{{__('SUBDIVISION')}}</th>
                                                                            <th scope="col" style="color: white;">{{__('COMPANY')}}</th>
                                                                            <th scope="col" style="color: white;">{{__('SC email')}}</th>
                                                                            <th scope="col" style="color: white;">{{__('SC CC email')}}</th>
                                                                            <th scope="col" style="color: white;">{{__('Manager Remarks')}}</th>
                                                                            <th scope="col" style="color: white;">{{__('QS Remarks')}}</th>
                                                                            <th scope="col" style="color: white;">{{__('RFQ Status')}}</th>
                                                                            <th scope="col" style="color: white;">{{__('QUOTE Status')}}</th>
                                                                        </tr>
                                                                    </thead>
                                                                </table>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

@include('new_layouts.footer')

<script src="{{ asset('datatable/jquery.dataTables.min.js') }}"></script>

<script>
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $("#get_manincharge").chosen({
        placeholder_text: "{{ __('Incharge') }}"
    });

    $(document).ready(function() {
        sc_selection_datatable();
        rfq_selection_datatable();

        toggleInputs();
        $("#loader").hide();
    });

    $('#tender_id').on('change', function() {
        tender_id = $(this).val();
        rfq_selection_datatable(tender_id);
    });

    $('#actionSelect').on('change', function() {
        toggleInputs();
    });

   
    function toggleInputs() {
        const action = $('#actionSelect').val();

        if (action == 'download') {
            $('#importSection').hide();
            $('#downloadSection').show();
            $('#importsave').hide();
        }
        else if (action == 'import') {
            $('#importSection').show();
            $('#downloadSection').hide();
            $('#importsave').show();
        }
        else {
            $('#importSection').hide();
            $('#downloadSection').hide();
            $('#importsave').hide();
        }
    }

   function sc_selection_datatable(){
        $('#sc_selection-table').dataTable().fnDestroy();
        $('#sc_selection-table').DataTable({
            processing: true,
            serverSide: true,
            pagingType: 'full_numbers',
            aaSorting: [],
            "language": {
                "sLengthMenu": "{{ __('Show _MENU_ Records') }}",
                "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') }}:",
                "oPaginate": {
                    "sFirst": "{{ __('First') }}",
                    "sLast": "{{ __('Last') }}",
                    "sNext": "{{ __('Next') }}",
                    "sPrevious": "{{ __('Previous') }}"
                },
            },
            "ajax":{
                "url": "{{ url('sc_selection_list') }}",
                "dataType": "json",
                "type": "POST",
                data: function (data) {}
            },
            deferRender: true,
            order: [],
            columnDefs: [ { orderable: true, targets: [0,1,2,3,4,5]}], // Updated to include 6 columns
            pageLength: 10,
            searching: true,
            aoColumns: [
                { data: "main_trade" },
                { data: "sub_division" },
                { data: "category" },
                { data: "company" },
                { data: "sc_emails" },
                { data: "cc_emails" }
            ]
        });
    }

    function rfq_selection_datatable(tender_id){
    $('#rfq_selection-table').dataTable().fnDestroy();
    $('#rfq_selection-table').DataTable({
        processing: true,
        serverSide: true,
        pagingType: 'full_numbers',
        aaSorting: [],
        "language": {
            "sLengthMenu": "{{ __('Show _MENU_ Records') }}",
            "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') }}:",
            "oPaginate": {
                "sFirst": "{{ __('First') }}",
                "sLast": "{{ __('Last') }}",
                "sNext": "{{ __('Next') }}",
                "sPrevious": "{{ __('Previous') }}"
            },
        },
        "ajax":{
            "url": "{{ url('rfq_selection_list') }}",
            "dataType": "json",
            "type": "POST",
            data: function (data) {
                data.tender_id = tender_id;
            }
        },
        deferRender: true,
        order: [],
        columnDefs: [ 
            { orderable: true, targets: [0,1,2,3,4,5]},
            { orderable: false, targets: [6]} // CC emails column not orderable
        ],
        pageLength: 10,
        searching: true,
        aoColumns: [
            { data: "selection" },          // index 0
            { data: "main_trade" },         // index 1
            { data: "sub_division" },       // index 2
            { data: "category" },           // index 3
            { data: "company" },            // index 4
            { data: "sc_emails" },          // index 5
            { 
                data: "cc_emails",          // index 6 - CC emails with badges
                orderable: false,           // Disable sorting for HTML content
                searchable: false           // Disable searching for HTML content
            },
            { data: "main_con_remarks" },
            { data: "sc_remarks" },
            { 
                data: "main_con_status",    // index 7 - Main con status
                orderable: false,
                searchable: false
            },
            { 
                data: "sub_con_status",      // index 8 - Sub con status
                orderable: false,
                searchable: false
            },
        ]
    });
}

    $('#importForm').on('submit', function(e) {
        e.preventDefault();

        var formData = new FormData(this);

        if ($('#actionSelect').val() === 'import') {
            if (!$('#file').val()) {
                toastr.error('Please select a file to import');
                return false;
            }

            // Show loader
            $('#loader').show();

            $.ajax({
                url: "{{ route('tender_excel_upload') }}",
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,
                success: function(response) {
                    $('#loader').hide();

                    if (response.success) {
                        toastr.success(response.success);
                        $('#importForm')[0].reset();
                        location.reload();
                    } else if (response.error) {
                        toastr.error(response.error);
                    }
                },
                error: function(xhr) {
                    $('#loader').hide();

                    if (xhr.status === 422 && xhr.responseJSON && xhr.responseJSON.errors) {
                        const errors = xhr.responseJSON.errors;
                        
                       
                        errors.slice(0, 3).forEach(error => {
                            const errorMsg = `Row ${error.row}: ${error.field} - ${error.errors.join(', ')} (Value: "${error.value}")`;
                            toastr.error(errorMsg, 'Validation Error', { timeOut: 10000 });
                        });

                       
                        if (errors.length > 3) {
                            toastr.warning(`+${errors.length - 3} more errors. Check the file.`, 'Additional Errors', { timeOut: 8000 });
                        }
                    } 
                   
                    else if (xhr.responseJSON && xhr.responseJSON.message) {
                        toastr.error(xhr.responseJSON.message, 'Import Failed');
                    } 
                   
                    else {
                        toastr.error("An unknown error occurred. Please try again.");
                    }
                }
            });
        }
    });

    function check_call(mainId, elem) {
        var checkVal = $(elem).prop('checked');
        var get_manincharge = $("#get_manincharge").val();
        
        var selectedTender = $('#tender_id').val();
        if (selectedTender === 'select') {
            toastr.error('Please select a tender first');
            $('.selectionCheck[data-main_id="' + mainId + '"]').prop('checked', false);
            return false;
        }
       
        if(get_manincharge.length == 0 && checkVal == true){
            toastr.error('Please select at least one CC / BCC Incharge');
            $(elem).prop('checked', false);
            return false;
        }
        
        $.ajax({
            url: "{{ route('tender_check_responses') }}",
            type: 'POST',
            data: {
                main_id: mainId,
                checkVal: checkVal,
                tender_id: selectedTender,
                get_manincharge: get_manincharge,
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                if(checkVal == true){
                    toastr.success('Data is moved to the RFQ completed successfully');
                }
                else{
                    toastr.success('Data Removed successfully');
                }
            },
            error: function(xhr, status, error) {
                console.error('Error:', error);
                $('.selectionCheck[data-main_id="' + mainId + '"]').prop('checked', false);
                toastr.error('An error occurred: ' + error);
            }
        });
    }

    function mainConRemarks(mainId, elem){
        var value = $(elem).val();
        var selectedTender = $('#tender_id').val();

        $.ajax({
            url: "{{ route('tender_rfq_selection_remarks_save') }}",
            type: 'POST',
            data: {
                main_id: mainId,
                value: value,
                tender_id: selectedTender,
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                toastr.success('Remarks Updated successfully');
            },
            error: function(xhr, status, error) {
                console.error('Error:', error);
                $('.selectionCheck[data-main_id="' + mainId + '"]').prop('checked', false);
                toastr.error('An error occurred: ' + error);
            }
        });
    }


    $('.selectionCheck').on('change', function() {
        var mainId = $(this).data('main_id');
        check_call(mainId, this);
    });

</script>