@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">
<link href="http://hayageek.github.io/jQuery-Upload-File/4.0.11/uploadfile.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tagify/4.3.1/tagify.css">
<style>
.ajax-upload-dragdrop {
    border: 2px dotted #A5A5C7;
    width: 95px !important;
    color: #DADCE3;
    text-align: left;
    vertical-align: middle;
    padding: 10px 10px 0px 10px;
}
.custom-checkbox input[type="checkbox"] {
        display: none;
    }

/* Custom checkmark style */
.custom-checkbox .checkmark {
    width: 30px;  /* Increase the width */
    height: 30px; /* 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 */
}
.ajax-upload-dragdrop span {
    display: none; /* Hides the drag and drop sentence */
}
input#manual_check_box_status {
    display: none;
}
input#check_box_status {
    display: none;
}
.chosen-container {
    width: 100% !important; 
}
[id^="fileuploader_"] .ajax-upload-dragdrop b {
    display: none;
}
.ajax-file-upload-statusbar{
    width: 200px !important;
}
.ajax-file-upload-filename {
    width: 200px !important;
}
.dotted-loader {
    width: 100px; /* Adjust width as needed */
    height: 10px; /* Adjust height as needed */
    border-radius: 5px;
    position: relative;
    overflow: hidden;
}

.dotted-loader::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, transparent 33%, #3498db 33%, #3498db 66%, transparent 66%, transparent 100%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite linear;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: 0 0;
    }
}
#manual_process{
    display: none;
}

#auto_process{
    display: none;
}
</style>

@php
    $profile = \App\Models\Utility::get_file('uploads/avatar/');
@endphp
<div id="preloader" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(255, 255, 255, 0.8); z-index:9999; text-align:center;">
    <div style="position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);">
        <div class="dotted-loader"></div>
        <p>Loading, please wait...</p>
    </div>
</div>
<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">{{ __('Create Tender') }}</h2>
                    </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-12">
                                            {{ Form::open(['route' => 'tender.store', 'method' => 'post', 'id' => 'tenderCreate', 'enctype' => 'multipart/form-data']) }}
                                                <div class="row">
                                                    <div class="col-lg-6 col-md-6 col-sm-6">
                                                        @php
                                                            $rndColor = Utility::rndRGBColorCode();
                                                        @endphp
                                            
                                                        <input type="hidden" name="color_code" value="{{ $rndColor }}">
                                                        <input type="hidden" name="tender_id" id="tender_id">
                                                        
                                                        <div class="form-group">
                                                            {{ Form::label('project_name', __('Project Name'), ['class' => 'form-label']) }}<span
                                                                style='color:red;'>*</span>
                                                                <input type="text" name="project_name" id="project_name" value="{{ old('project_name') }}" class="form-control project_name @error('project_name') is-invalid @enderror" required>
                                                                <span class="invalid-name project_duplicate_error" role="alert" style="display: none;">
                                                                    <span class="text-danger">{{__('Project name Already Exist!')}}</span>
                                                                </span>
                                                                @error('project_name')
                                                                <div class="invalid-feedback">{{ $message }}</div>
                                                                @enderror
                                                        </div>
                                                    </div>

                                                    <div class="col-lg-6 col-md-6 col-sm-6">
                                                        <div class="form-group">
                                                            {{ Form::label('type', __('Type'), ['class' => 'form-label']) }}<span style='color:red;'>*</span>
                                                            <select name="tender_type" id="tender_type" class="form-control tender_type @error('tender_type') is-invalid @enderror" onchange="checkTenderType();">
                                                                <option value="">Select Tender Type</option>
                                                                <option value="1" {{ old('tender_type') == '1' ? 'selected' : '' }}>Manual (Mc only & SC by email)</option>
                                                                <option value="2" {{ old('tender_type') == '2' ? 'selected' : '' }}>Auto General (MC & SC)</option>
                                                            </select>
                                                            
                                                            <!-- Display validation error message -->
                                                            @error('tender_type')
                                                                <div class="invalid-feedback">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                    </div>
                                            
                                                    <div class="col-lg-4 col-md-4 col-sm-4">
                                                        <div class="form-group">
                                                            {{ Form::label('clarification_date', __('Clarification Date'), ['class' => 'form-label']) }}<span
                                                                style='color:red;'>*</span>
                                                                {{ Form::date('clarification_date', old('clarification_date'), [
                                                                    'class' => 'form-control clarification_date' . ($errors->has('clarification_date') ? ' is-invalid' : '')
                                                                ]) }}
                                                                <!-- Display validation error message -->
                                                                @error('clarification_date')
                                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                                @enderror
                                                        </div>
                                                    </div>
                                            
                                                    <div class="col-lg-4 col-md-4 col-sm-4">
                                                        <div class="form-group">
                                                            {{ Form::label('dead_line', __('Tender Closing Date'), ['class' => 'form-label ']) }}<span
                                                                style='color:red;'>*</span>
                                                                {{ Form::date('dead_line', old('dead_line'), [
                                                                    'class' => 'form-control dead_line' . ($errors->has('dead_line') ? ' is-invalid' : ''),
                                                                    'required' => true
                                                                ]) }}
                                                                
                                                        
                                                                <!-- Display validation error message -->
                                                                @error('dead_line')
                                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                                @enderror
                                                        </div>
                                                    </div>
                                            
                                                    <div class="col-lg-4 col-md-4 col-sm-4">
                                                        <div class="form-group">
                                                            {{ Form::label('extension_date', __('Extension Date'), ['class' => 'form-label']) }}
                                                            {{-- <span style='color:red;'>*</span> --}}
                                                            {{ Form::date('extension_date', null, ['class' => 'form-control extension_date']) }}
                                                        </div>
                                                    </div>

                                                    <div class="col-lg-12 col-md-12 col-sm-12">
                                                        <div class="form-group">
                                                            {{ Form::label('mc_comments', __('Overall Comments'), ['class' => 'form-label']) }}
                                                            <div class="form-icon-user">
                                                                <textarea class="form-control mc_comments" name="mc_comments" rows="4"></textarea>
                                                            </div>
                                                            <span class="show_document_error" style="color:red;"></span>
                                                        </div>
                                                    </div>

                                                    <!--This is a auto process starts-->
                                                    <div class="col-lg-12 col-md-12 col-sm-12" id="auto_process">
                                                        <table class="table table-vcenter card-table" id="trade_table" aria-describedby="Auto Tender Management">
                                                            <thead>
                                                                <tr>
                                                                    <th style="width: 2%">{{ __('#') }}<input type="checkbox" class="form-control" id="check_box_status"></th>
                                                                    <th style="width: 12.5%">{{ __('Trade') }}</th>
                                                                    <th style="width: 12.5%">{{ __('Sub Division') }}</th>
                                                                    <th style="width: 12.5%">{{ __('Sub-Contractor') }}</th>
                                                                    <th style="width: 12.5%">{{ __('Incharge') }}</th>
                                                                    <th style="width: 12.5%">{{ __('Upload') }}</th>
                                                                    <th style="width: 25%">{{ __('Comments') }}</th>
                                                                    <th style="width: 25%">{{ __('Quote Before') }}</th>
                                                                    <th style="width: 10%">{{ __('Action') }}</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <tr id="trade_1" data-tr_id="1">
                                                                    <td>
                                                                        <label class="custom-checkbox">
                                                                            <input type="checkbox" class="form-control check_box_status" name="check_box_status[1][]">
                                                                            <span class="checkmark"></span>
                                                                        </label>
                                                                    </td>
                                                                    <td>
                                                                        <select id="get_trade_1" onchange="trade(this, 1)" class="form-control chosen-select get_trade" class="form-control" name="trade_id[1][]" multiple="true">
                                                                            @foreach ($trades as $trade)
                                                                                <option value="{{ $trade->id }}">{{ $trade->main_trade }}</option>
                                                                            @endforeach
                                                                        </select>
                                                                    </td>
                                                                    <td>
                                                                        <select id="get_division_1" onchange="subDivision(this, 1)" class="form-control chosen-select get_division" name="sub_division_id[1][]" multiple="true">

                                                                        </select>
                                                                    </td>
                                                                    <td>
                                                                        <select id="get_subcontractor_1" class="form-control chosen-select get_subcontractor" name="sub_contractor_id[1][]" multiple="true">
                                                                            
                                                                        </select>
                                                                    </td>
                                                                    <td>
                                                                        <select id="get_incharge_1" class="form-control chosen-select get_incharge" name="incharge_id[1][]" multiple="true">
                                                                            @foreach ($incharge as $charge)
                                                                                <option value="{{ $charge->id }}">{{ $charge->name }}</option>
                                                                            @endforeach
                                                                        </select>
                                                                    </td>
                                                                    <td>
                                                                        <div id="fileuploader_1" class="fileuploader" data-tr_id="1">Upload</div>
                                                                        <div id="file_display_1"></div>
                                                                        <input type="hidden" name="file_id[1][]" id="file_id_1">
                                                                    </td>
                                                                    <td>
                                                                        <textarea id="comments_1" class="form-control comments" name="comments[1][]"></textarea>
                                                                    </td>
                                                                    <td>
                                                                       <input type="date" class="form-control quatation_request_date" name="quatation_request_date[1][]">
                                                                    </td>
                                                                    <td>
                                                                        <button onclick="addRowAuto()" type="button" class="btn btn-primary add_row">+</button>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                     <!--This is a auto process ends-->

                                                    <!--This is a manual process starts-->
                                                    <div class="col-lg-12 col-md-12 col-sm-12" id="manual_process">
                                                        <table class="table table-vcenter card-table" id="manual_trade_table" aria-describedby="Manual Tender Management">
                                                            <thead>
                                                                <tr>
                                                                    <th style="width: 2%">{{ __('#') }} <input type="checkbox" class="form-control" id="manual_check_box_status"></th>
                                                                    <th style="width: 12.5%">{{ __('Trade') }}</th>
                                                                    <th style="width: 12.5%">{{ __('Sub Division') }}</th>
                                                                    <th style="width: 12.5%">{{ __('Incharge') }}</th>
                                                                    <th style="width: 12.5%">{{ __('RFQ Upload') }}</th>
                                                                    <th style="width: 15%">{{ __('Comments') }}</th>
                                                                    <th style="width: 25%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ __('SC Email/Co') }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ __('Quote Received') }}</th>
                                                                    <th style="width: 12.5%">{{ __('Quote Before') }}</th>
                                                                    <th style="width: 10%">{{ __('Action') }}</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <tr id="manual_trade_1" data-tr_id="1">
                                                                    <td>
                                                                        <label class="custom-checkbox">
                                                                            <input type="checkbox" class="form-control manual_check_box_status" name="check_box_status[1][]">
                                                                            <span class="checkmark"></span>
                                                                        </label>
                                                                    </td>
                                                                    <td>
                                                                        <select id="get_manual_trade_1" onchange="manual_trade(this, 1)" class="form-control chosen-select get_trade_manual" class="form-control" name="trade_id[1][]" multiple="true">
                                                                            @foreach ($trades as $trade)
                                                                                <option value="{{ $trade->id }}">{{ $trade->main_trade }}</option>
                                                                            @endforeach
                                                                        </select>
                                                                    </td>
                                                                    <td>
                                                                        <select id="get_manual_division_1"  class="form-control chosen-select get_division_manual" name="sub_division_id[1][]" multiple="true">

                                                                        </select>
                                                                    </td>
                                                                    <td>
                                                                        <select id="get_manincharge_1" class="form-control chosen-select get_manincharge" name="incharge_id[1][]" multiple="true">
                                                                            @foreach ($incharge as $charge)
                                                                                <option value="{{ $charge->id }}">{{ $charge->name }}</option>
                                                                            @endforeach
                                                                        </select>
                                                                    </td>

                                                                    <td>
                                                                        <div id="manual_fileuploader_1" class="fileuploader" data-tr_id="1">Upload</div>
                                                                        <div id="manual_file_display_1"></div>
                                                                        <input type="hidden" name="file_id[1][]" id="manual_file_id_1">
                                                                    </td>

                                                                   
                                                                    <td>
                                                                        <textarea id="comments_1" class="form-control comments" name="comments[1][]"></textarea>
                                                                    </td>

                                                                    <td>
                                                                        <table id="manual_trade_sub_table_1" class="manual_trade_sub_table">
                                                                            <tr data-tr_sub_id='1' data-tr_main_id='1'>
                                                                                <td>
                                                                                    <div id="sc_email_container_1_1">
                                                                                        <div class="field-row d-flex align-items-center mb-2" data-row-id="row_1_1">
                                                                                            <div class="flex-grow-1 me-2">
                                                                                                <input type="text" id="sc_email_co_1_1" 
                                                                                                    class="form-control multiple-emails" 
                                                                                                    name="sc_email_co[1][]" 
                                                                                                    placeholder="Enter emails here" />
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </td>
                                                                                <td>
                                                                                    <div id="rfq_container_1_1">
                                                                                        <div class="field-row d-flex align-items-center mb-2" data-row-id="row_1_1">
                                                                                            <div class="flex-grow-1 me-2">
                                                                                                <div id="rfq_fileuploader_1_1" class="fileuploader" data-tr_id="1" data-tr_sub_id="1">Upload</div>
                                                                                                <div id="rfq_file_display_1_1"></div>
                                                                                                <input type="hidden" name="rfq_file_id[1][]" id="rfq_file_id_1_1">
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </td>
                                                                                <td style="position: absolute;">
                                                                                    <button type="button" class="btn btn-primary btn-sm mt-2" onclick="addFields(1)"><i class="fa fa-plus" aria-hidden="true"></i></button>
                                                                                </td>
                                                                            </tr>
                                                                        </table>
                                                                    </td>
                                                                   
                                                                    <td>
                                                                       <input type="date" class="form-control quatation_request_date" name="quatation_request_date[1][]">
                                                                    </td>
                                                                    <td>
                                                                        <button onclick="addRowManual();" type="button" class="btn btn-primary add_row_manual"><i class="fa fa-plus" aria-hidden="true"></i></button>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                    <!--This is a manual process ends-->

                                                    <div class="d-flex justify-content-end">
                                                        <input type="button" class="btn btn-danger me-2" value="Back" onclick="location.href='{{ route('tender.index') }}'">
                                                        <input type="submit" value="{{ __('Send') }}" class="btn btn-primary me-2" id="create_tender">
                                                       
                                                    </div>
                                                    
                                                </div>
                                            {{ Form::close() }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>


@include('new_layouts.footer')
<script src="http://hayageek.github.io/jQuery-Upload-File/4.0.11/jquery.uploadfile.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tagify/4.3.1/tagify.min.js"></script>
<script>
    var tempcsrf         = '{!! csrf_token() !!}';
    let lastErrorMessage = '';
    let lastErrorTime    = 0;
    const ERROR_COOLDOWN = 3000; // 3 seconds cooldown between same messages

    $(document).ready(function() {
        setMulitpleOption();

        $('#preloader').hide();

        toastr.options = {
            preventDuplicates: true,
            timeOut: 3000,
            closeButton: true
        };

        $(".clarification_date, .dead_line, .extension_date").change(function() {
            validateDates();
        });
    });

    $(".dead_line").change(function(){
        var value = $(this).val();
        $(".quatation_request_date").attr("max", value);
        $(".extension_date").attr("min", value);
    });

    $(".extension_date").change(function(){
        var value = $(this).val();
        $(".quatation_request_date").attr("max", value);
    });

    function trade(get_this, tr_id){
        let tradeIds = $(get_this).val();
        $("#get_division_"+tr_id).empty();

        if (tradeIds.length > 0) {
            $.ajax({
                url: "{{route('get_divisions_tender')}}", // Your route for fetching divisions
                type: 'GET',
                data: { trade_ids: tradeIds },
                success: function(data) {
                    // Assuming data is an array of division objects
                    $.each(data, function(index, division) {
                        $("#get_division_"+tr_id).append(
                            $('<option>', {
                                value: division.id,
                                text: division.division_item
                            })
                        );
                    });
                    // Refresh the Chosen select plugin if using it
                    $("#get_division_"+tr_id).trigger("chosen:updated");
                },
                error: function(xhr) {
                    console.error('Error fetching divisions:', xhr);
                }
            });
        }
    }

    function manual_trade(get_this, tr_id){
        let tradeIds = $(get_this).val();
        $("#get_manual_division_"+tr_id).empty();

        if (tradeIds.length > 0) {
            $.ajax({
                url: "{{route('get_divisions_tender')}}", // Your route for fetching divisions
                type: 'GET',
                data: { trade_ids: tradeIds },
                success: function(data) {
                    // Assuming data is an array of division objects
                    $.each(data, function(index, division) {
                        $("#get_manual_division_"+tr_id).append(
                            $('<option>', {
                                value: division.id,
                                text: division.division_item
                            })
                        );
                    });
                    // Refresh the Chosen select plugin if using it
                    $("#get_manual_division_"+tr_id).trigger("chosen:updated");
                },
                error: function(xhr) {
                    console.error('Error fetching divisions:', xhr);
                }
            });
        }
    }

    function subDivision(get_this, tr_id){
        var subcontractorData = [];

        let divisionIds = $(get_this).val();
        $("#get_subcontractor_"+tr_id).empty();

        $('#trade_table tr').each(function() {
            $(this).find('.get_subcontractor').each(function() {
                subcontractorData.push($(this).val());
            });
        });

        var mergedArray = [...new Set(subcontractorData.flat())];

        if (divisionIds.length > 0) {
            $.ajax({
                url: "{{ route('get_tender_for_subcon')}}", // Your route for fetching subcontractors
                type: 'GET',
                data: { division_ids: divisionIds },
                success: function(data) {
                    // Assuming data is an array of subcontractor objects
                    $.each(data, function(index, subcontractor) {
                        var optionValue = subcontractor.id;
                        var optionText = subcontractor.name;

                        var option = $('<option>', {
                            value: optionValue,
                            text: optionText
                        });
                        
                        $("#get_subcontractor_"+tr_id).append(option);

                        $("#get_subcontractor_"+tr_id+" option").each(function() {
                            if (mergedArray.includes(this.value)) {
                                $(this).prop('disabled', true);
                            }
                        });
                    });
                    
                    // Refresh the Chosen select plugin if using it
                    $("#get_subcontractor_"+tr_id).trigger("chosen:updated");
                },
                error: function(xhr) {
                    console.error('Error fetching subcontractors:', xhr);
                }
            });
        }
    }

    function addRowAuto(){
        $(this).prop('disabled', true);
        var tr_last_id = $('#trade_table tr:last').data('tr_id');
       
        $.ajax({
            url : '{{ route("multi_add_trade") }}',
            type : 'POST',
            data : {
                _token: tempcsrf, tr_last_id:tr_last_id
            },
            dataType:'json',
            success : function(data) {
                if(data['status'] == true) {
                    $('#trade_table tbody').append(data['html']);

                    setTimeout(function () {
                        setMulitpleOption();
                        $(".add_row").prop('disabled', false);
                        var dead_line = $(".dead_line").val();
                        var extension_date = $(".extension_date").val();

                        if(extension_date != ''){
                            $(".quatation_request_date").attr("max", extension_date);
                        }
                        else{
                            $(".quatation_request_date").attr("max", dead_line);
                        }
                    }, 800);
                }
            },
            error : function(request,error)
            {
                alert("Request: "+JSON.stringify(request));
            }
        });
    }

    function addRowManual(){
        $(".add_row_manual").prop('disabled', true);
        // var tr_last_id = $('#manual_trade_table tr:last').data('tr_id');
        var maxId = 1;
        $('#manual_trade_table tr').each(function() {
            var currentId = $(this).data('tr_id');
            if (currentId && currentId > maxId) {
                maxId = currentId;
            }
        });
    
        var tr_last_id = maxId;
        
        $.ajax({
            url : '{{ route("manual_multi_add_trade") }}',
            type : 'POST',
            data : {
                _token: tempcsrf, tr_last_id:tr_last_id
            },
            dataType:'json',
            success : function(data) {
                if(data['status'] == true) {
                    $('#manual_trade_table').append(data['html']);

                    setTimeout(function () {
                        setMulitpleOption();
                        $(".add_row_manual").prop('disabled', false);
                        var dead_line = $(".dead_line").val();
                        var extension_date = $(".extension_date").val();
                        email_increment(tr_last_id + 1);
                        if(extension_date != ''){
                            $(".quatation_request_date").attr("max", extension_date);
                        }
                        else{
                            $(".quatation_request_date").attr("max", dead_line);
                        }
                    }, 800);
                }
            },
            error : function(request,error)
            {
                alert("Request: "+JSON.stringify(request));
            }
        });
    }

    function removeRow(e, tr_last_id) {
        $('#trade_'+tr_last_id).remove();
    }

    function removeRowmanual(e, tr_last_id) {
        $('#manual_trade_'+tr_last_id).remove();
    }

    function setMulitpleOption(){
        $(".get_incharge").chosen({
            placeholder_text: "{{ __('Incharge') }}"
        });

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

        $(".get_trade").chosen({
            placeholder_text: "{{ __('Trade') }}"
        });

        $(".get_division").chosen({
            placeholder_text: "{{ __('Sub-Division') }}"
        });

        $(".get_trade_manual").chosen({
            placeholder_text: "{{ __('Trade') }}"
        });

        $(".get_division_manual").chosen({
            placeholder_text: "{{ __('Sub-Division') }}"
        });

        $(".get_subcontractor").chosen({
            placeholder_text: "{{ __('SubContractor') }}"
        });

        $('#trade_table tbody tr').each(function() {
            var trId = $(this).data('tr_id');

            $("#fileuploader_"+trId).uploadFile({
                url:"{{ route('tender_fileupload') }}",
                dynamicFormData: function() {
                    var data ={ _token: tempcsrf, tr_id: trId, project_name: $(".project_name").val(), 
                    clarification_date: $(".clarification_date").val(), dead_line: $(".dead_line").val(), extension_date: $(".extension_date").val(),
                    before_closing_date: $(".before_closing_date").val(), mc_comments: $(".mc_comments").val(), tender_id: $("#tender_id").val()};
                    return data;
                },
                fileName:"myfile",
                multiple:true,
                dragDrop:true,
                showDelete: true,
                showStatusAfterSuccess: true,
                showStatusAfterError: true,
                showFileCounter: true,
                showFileSize: true,
                onSelect:function(files){
                    $(".ajax-file-upload-statusbar").remove();
                },
                onSuccess: function (files, data, xhr) {
                    if (data.status == true) {
                        $(".ajax-file-upload-progress").hide();
                        $("#tender_id").val(data.tender_id);

                        var currentFileId = data.file_id;
                        var fileIdTextbox = $('#file_id_' + trId);
                        var currentValue = fileIdTextbox.val();

                        if (currentValue) {
                            var fileIds = currentValue.split(',').map(function(item) {
                                return item.trim();
                            });

                            if (fileIds.indexOf(currentFileId) === -1) {
                                fileIds.push(currentFileId);
                            }

                            fileIdTextbox.val(fileIds.join(', '));
                        }
                        else {
                            fileIdTextbox.val(currentFileId);
                        }

                        $(".ajax-file-upload-statusbar").css("display", "none");

                        var _html = '<div class="col-md-12">'+
                            '<div style="color: green; font-weight:600; width:100%; font-size: 12px; word-wrap: break-word;" data-id="'+data.file_id+'">'+data.file_name+' &nbsp;&nbsp;'+
                                '<button type="button" style="color: #980505; background: none; padding: 0; margin-top: -5px;" class="btn btn-sm unselect_files" onclick="removeFiles('+trId+','+data.file_id+')">'+
                                    '<li class="fa fa-trash"></li>'+
                                '</button>'+
                            '</div>'+
                        '</div>';
                        
                        $("#file_display_"+trId).append(_html);
                    }
                }
            });
        });

        $('#manual_trade_table tbody tr').each(function() {
            var trId = $(this).data('tr_id');
            initializeEmailValidation('#sc_email_co_'+trId);

            $("#manual_fileuploader_"+trId).uploadFile({
                url:"{{ route('tender_fileupload') }}",
                dynamicFormData: function() {
                    var data ={ _token: tempcsrf, tr_id: trId, project_name: $(".project_name").val(), 
                    clarification_date: $(".clarification_date").val(), dead_line: $(".dead_line").val(), extension_date: $(".extension_date").val(),
                    before_closing_date: $(".before_closing_date").val(), mc_comments: $(".mc_comments").val(), tender_id: $("#tender_id").val()};
                    return data;
                },
                fileName:"myfile",
                multiple:true,
                dragDrop:true,
                showDelete: true,
                showStatusAfterSuccess: true,
                showStatusAfterError: true,
                showFileCounter: true,
                showFileSize: true,
                onSelect:function(files){
                    $(".ajax-file-upload-statusbar").remove();
                },
                onSuccess: function (files, data, xhr) {
                    if (data.status == true) {
                        $(".ajax-file-upload-progress").hide();
                        $("#tender_id").val(data.tender_id);

                        var currentFileId = data.file_id;
                        var fileIdTextbox = $('#manual_file_id_' + trId);
                        var currentValue = fileIdTextbox.val();

                        if (currentValue) {
                            var fileIds = currentValue.split(',').map(function(item) {
                                return item.trim();
                            });

                            if (fileIds.indexOf(currentFileId) === -1) {
                                fileIds.push(currentFileId);
                            }

                            fileIdTextbox.val(fileIds.join(', '));
                        }
                        else {
                            fileIdTextbox.val(currentFileId);
                        }

                        $(".ajax-file-upload-statusbar").css("display", "none");

                        var _html = '<div class="col-md-12">'+
                            '<div style="color: green; font-weight:600; width:100%; font-size: 12px; word-wrap: break-word;" data-id="'+data.file_id+'">'+data.file_name+' &nbsp;&nbsp;'+
                                '<button type="button" style="color: #980505; background: none; padding: 0; margin-top: -5px;" class="btn btn-sm unselect_files" onclick="removeFiles('+trId+','+data.file_id+')">'+
                                    '<li class="fa fa-trash"></li>'+
                                '</button>'+
                            '</div>'+
                        '</div>';
                        
                        $("#manual_file_display_"+trId).append(_html);
                    }
                }
            });

            initializeField(trId);
        });
    }

    function removeFiles(tr_id, file_id){
        var fileIdTextbox = $('#file_id_' + tr_id);
        var currentValue = fileIdTextbox.val();
        var tender_id = $("#tender_id").val();

        swal.fire({
            title: "Delete?",
            icon: 'question',
            text: "Please ensure and then confirm!",
            type: "warning",
            showCancelButton: true,
            confirmButtonText: "Yes, delete it!",
            cancelButtonText: "No, cancel!",
            reverseButtons: true
        }).then(function (e) {
            if (e.value === true) {
                $.ajax({
                    url: "{{ route('delete-tender-files') }}",
                    method: 'POST',
                    data: {
                        file_id: file_id,
                        tender_id: tender_id,
                        _token: $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function (response) {
                        if (response.success) {

                            if (currentValue) {
                                var fileIds = currentValue.split(',').map(function(item) {
                                    return item.trim();
                                });

                                var index = fileIds.indexOf(file_id.toString());
                                if (index > -1) {
                                    fileIds.splice(index, 1);
                                }

                                fileIdTextbox.val(fileIds.join(', '));
                            }

                            $('#file_display_'+tr_id+' div[data-id="'+file_id+'"]').remove();

                            swal.fire("Deleted!", "The file has been deleted.", "success");
                        }
                        else {
                            swal.fire("Failed!", "An error occurred while deleting the file.", "error");
                        }
                    },
                    error: function () {
                        swal.fire("Error!", "There was a problem with the request.", "error");
                    }
                });
            }
            else {
                e.dismiss;
            }
        });
    }

    function removeManualFiles(tr_id, file_id, tr_sub_id){
        merge_id = tr_id+'_'+tr_sub_id;
        var fileIdTextbox = $('#rfq_file_id_' + merge_id);
        var currentValue  = fileIdTextbox.val();
        var tender_id     = $("#tender_id").val();

        swal.fire({
            title: "Delete?",
            icon: 'question',
            text: "Please ensure and then confirm!",
            type: "warning",
            showCancelButton: true,
            confirmButtonText: "Yes, delete it!",
            cancelButtonText: "No, cancel!",
            reverseButtons: true
        }).then(function (e) {
            if (e.value === true) {
                $.ajax({
                    url: "{{ route('delete-tender-files') }}",
                    method: 'POST',
                    data: {
                        file_id: file_id,
                        tender_id: tender_id,
                        _token: $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function (response) {
                        if (response.success) {

                            if (currentValue) {
                                var fileIds = currentValue.split(',').map(function(item) {
                                    return item.trim();
                                });

                                var index = fileIds.indexOf(file_id.toString());
                                if (index > -1) {
                                    fileIds.splice(index, 1);
                                }

                                fileIdTextbox.val(fileIds.join(', '));
                            }

                            $('#rfq_file_display_'+merge_id+' div[data-id="'+file_id+'"]').remove();

                            swal.fire("Deleted!", "The file has been deleted.", "success");
                        }
                        else {
                            swal.fire("Failed!", "An error occurred while deleting the file.", "error");
                        }
                    },
                    error: function () {
                        swal.fire("Error!", "There was a problem with the request.", "error");
                    }
                });
            }
            else {
                e.dismiss;
            }
        });
    }

    $(document).on("focusout", '#project_name', function () {
        $.ajax({
            url : '{{ route("check_duplicate_project_name") }}',
            type : 'GET',
            data : { 'getname' : $("#project_name").val(),'formname' : "create" },
            success : function(data) {
                if(data == 1){
                    $("#create_tender").prop('disabled',false);
                    $(".project_duplicate_error").css('display','none');
                }
                else{
                    $("#create_tender").prop('disabled',true);
                    $(".project_duplicate_error").css('display','block');
                }
            },
            error : function(request,error)
            {
                // alert("Request: "+JSON.stringify(request));
            }
        });
    });

    $('#tenderCreate').submit(function(event) {
        event.preventDefault(); 	
        $('#preloader').show(); 
        $(this).unbind('submit').submit();
    });

    function validateDates() {
        const clarificationDate = new Date($(".clarification_date").val());
        const tenderClosingDate = new Date($(".dead_line").val());
        const extensionDate = new Date($(".extension_date").val());

        // Check if clarification date is less than tender closing date
        if (clarificationDate && tenderClosingDate && clarificationDate >= tenderClosingDate) {
            toastr.error('Clarification Date must be less than Tender Closing Date.');
            $(".clarification_date").val('');
        }

        // Check if tender closing date is less than extension date (if given)
        if (tenderClosingDate && extensionDate && tenderClosingDate >= extensionDate) {
            toastr.error('Tender Closing Date must be less than Extension Date.');
            $(".dead_line").val('');
        }

        // Check if extension date is greater than tender closing date
        if (extensionDate && tenderClosingDate && extensionDate <= tenderClosingDate) {
            toastr.error('Extension Date must be greater than Tender Closing Date.');
            $(".extension_date").val('');
        }

        // Update the max/min attributes based on current dates
        if (clarificationDate) {
            $(".dead_line").attr("min", clarificationDate.toISOString().split("T")[0]);
        }
        if (tenderClosingDate) {
            $(".extension_date").attr("min", tenderClosingDate.toISOString().split("T")[0]);
        }
    }

    function showToastrError(message) {
        const currentTime = Date.now();
        
        // Only show the message if it's different from the last one
        // or if enough time has passed since the last same message
        if (message !== lastErrorMessage || (currentTime - lastErrorTime) > ERROR_COOLDOWN) {
            toastr.clear(); // Clear any existing notifications
            toastr.error(message);
            lastErrorMessage = message;
            lastErrorTime = currentTime;
        }
    }

    function isValidEmail(email) {
        const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
        return emailRegex.test(email);
    }

    function initializeEmailValidation(selector) {
        const input = document.querySelector(selector);
        if (!input) return;

        // Initialize Tagify with validation and max items restriction
        return new Tagify(input, {
            maxTags: 1,
            validate: function(tag) {
                const email = tag.value;
                const valid = isValidEmail(email);
                if (!valid) {
                    showToastrError('Please enter a valid email address');
                }
                return valid;
            },
            transformTag: function(tagData) {
                // Convert email to lowercase before adding as a tag
                tagData.value = tagData.value.toLowerCase();
            },
            dropdown: {
                enabled: 0 // Disable dropdown suggestions
            }
        });
    }

    function email_increment(id) {
        // Initialize Tagify with validation for dynamically added email inputs
        initializeEmailValidation('#sc_email_co_' + id);
    }

    function checkTenderType() {
        var tenderTypeValue = $('#tender_type').val(); // Get the selected value
        if (tenderTypeValue === "2") {
            $('#manual_process').hide();
            $('#auto_process').show();
        } else if (tenderTypeValue === "1") {
            $('#auto_process').hide();
            $('#manual_process').show();
        
            // Additional logic for Type 0
        } else {
        
        }
    }

    function initializeField(tr_main_id) {
        var tr_main_id = (tr_main_id == 0) ? 1 : tr_main_id;

        $('#manual_trade_sub_table_'+tr_main_id+' tr').each(function() {
            var tr_main_id = $(this).data('tr_main_id');
            var tr_sub_id  = $(this).data('tr_sub_id');
            set_merge_id = tr_main_id+'_'+tr_sub_id;

            let emailInput = document.getElementById('sc_email_co_'+set_merge_id);
            if (emailInput) {
                 console.log("emailInput value:", emailInput.value); // 
                new Tagify(emailInput, {
                    maxTags: 1, // Allow only one email
                    pattern: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
                    dropdown: {
                        enabled: 0
                    }
                });

             
            //   emailInput.addEventListener('change', function(e) {
            //     // Check if the input value is empty
            //     if (!this.value) {
            //         $('#create_tender').prop('disabled', false);
            //         return; // Exit the function early
            //     }

            //         $.ajax({
            //             url: '{{ route("check_tender_email") }}',
            //             type: 'GET',
            //             data: { 'getname': this.value, 'formname': "Users" },
            //             success: function(data) {
            //                 if (!data.exists) { // Check if email is available
            //                     $('#create_tender').prop('disabled', false);
            //                 } else {
            //                     $('#create_tender').prop('disabled', true);
            //                     toastr.error(data.message || 'Email is already in use');
            //                     emailInput.value = ''; // Clear the input value if email is already in use
            //                 }
            //             },
            //             error: function(request, error) {
            //                 console.error("Request error: ", request);
            //             }
            //         });
            //   });


            }

            var $fileUploader = $("#rfq_fileuploader_" + set_merge_id);

            // Accessing data attributes directly
            var tr_ids = $fileUploader.data('tr_id');
            var tr_sub_ids = $fileUploader.data('tr_sub_id');

            $fileUploader.uploadFile({
                url:"{{ route('tender_fileupload') }}",
                dynamicFormData: function() {
                    var data ={ _token: tempcsrf, tr_id: tr_main_id, project_name: $(".project_name").val(), 
                    clarification_date: $(".clarification_date").val(), dead_line: $(".dead_line").val(), extension_date: $(".extension_date").val(),
                    before_closing_date: $(".before_closing_date").val(), mc_comments: $(".mc_comments").val(), tender_id: $("#tender_id").val(), upload_type: 'rfq'};
                    return data;
                },
                fileName:"myfile",
                multiple:true,
                dragDrop:true,
                showDelete: true,
                showStatusAfterSuccess: true,
                showStatusAfterError: true,
                showFileCounter: true,
                showFileSize: true,
                onSelect:function(files){
                    $(".ajax-file-upload-statusbar").remove();
                },
                onSuccess: function (files, data, xhr) {
                    if (data.status == true) {
                        set_mergerge_inside_id = tr_ids+'_'+tr_sub_ids;
                        $(".ajax-file-upload-progress").hide();
                        $("#tender_id").val(data.tender_id);

                        console.log("set_mergerge_inside_id",set_mergerge_inside_id);

                        var currentFileId = data.file_id;
                        var fileIdTextbox = $('#rfq_file_id_' + set_mergerge_inside_id);
                        var currentValue = fileIdTextbox.val();

                        if (currentValue) {
                            var fileIds = currentValue.split(',').map(function(item) {
                                return item.trim();
                            });

                            if (fileIds.indexOf(currentFileId) === -1) {
                                fileIds.push(currentFileId);
                            }

                            fileIdTextbox.val(fileIds.join(', '));
                        }
                        else {
                            fileIdTextbox.val(currentFileId);
                        }

                        $(".ajax-file-upload-statusbar").css("display", "none");

                        var _html = '<div class="col-md-12">'+
                            '<div style="color: green; font-weight:600; width:100%; font-size: 12px; word-wrap: break-word;" data-id="'+data.file_id+'">'+data.file_name+' &nbsp;&nbsp;'+
                                '<button type="button" style="color: #980505; background: none; padding: 0; margin-top: -5px;" class="btn btn-sm unselect_files" onclick="removeManualFiles('+tr_ids+','+data.file_id+', '+tr_sub_ids+')">'+
                                    '<li class="fa fa-trash"></li>'+
                                '</button>'+
                            '</div>'+
                        '</div>';
                        
                        $("#rfq_file_display_"+set_mergerge_inside_id).append(_html);
                    }
                }
            });
        });
    }

    function addFields(rowId) {
        $(this).prop('disabled', true);

        console.log("Manul add Fields: ", rowId);
        
        var tr_sub_id = $('#manual_trade_sub_table_'+rowId+' tr:last').data('tr_sub_id');
        
        $.ajax({
            url : '{{ route("manual_multi_email_add_trade") }}',
            type : 'POST',
            data : {
                _token: tempcsrf, tr_sub_id:tr_sub_id, tr_main_id:rowId
            },
            dataType:'json',
            success : function(data) {
                if(data['status'] == true) {
                    $('#manual_trade_sub_table_'+rowId).append(data['html']);

                    setTimeout(function () {
                        $(this).prop('disabled', false);
                        initializeField(rowId);
                    }, 800);
                }
            },
            error : function(request,error)
            {
                alert("Request: "+JSON.stringify(request));
            }
        });
    }

    function removeEntireRow(button) {
        const row = button.closest('tr');
        if (!row) return;

    
        console.log("Row found: ", row);

      
        const fieldRows = row.querySelectorAll('.field-row');
        
        if (fieldRows.length === 0) {
            console.error("No .field-row found in the row for the button");
            return;
        }

        const fileRow = fieldRows[1]; 

      
        const rowId = fileRow.getAttribute('data-row-id');
        console.log("Row ID: ", rowId);

       
        row.remove();
    }
   
    //  $('#check_box_status').on('click', function() {
    //      var isChecked = $(this).prop('checked');
    //      $('.check_box_status').prop('checked', isChecked);
    //  });
    //  $('#manual_check_box_status').on('click', function() {
    //     var isChecked = $(this).prop('checked');
    //      $('.manual_check_box_status').prop('checked', isChecked);
    //  });
</script>