@extends('layouts.user_type.auth')

@section('companyProfile.config')
    <div class="row">
        <div class="col-12">

            @include('components.alert')

            <div class="card mb-4 mx-4">
                <div class="card p-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <h3>{{ $company_name ?? 'Config Settings' }}</h3>
                        <div>
                            <a href="{{ route('companyProfile.company', ['id' => request()->route('id')]) }}"
                                class="btn btn-primary me-2">Company</a>
                            <!-- <a href="{{ route('companyProfile.basicInfo', ['id' => request()->route('id')]) }}" class="btn btn-primary me-2">Admin Contact</a> -->
                            <a href="{{ route('companyProfile.tenant', ['id' => request()->route('id')]) }}"
                                class="btn btn-primary me-2">Tenant</a>
                            <a href="{{ route('companyProfile.microsoft', ['id' => request()->route('id')]) }}"
                                class="btn btn-primary me-2">Microsoft</a>
                            <a href="{{ route('companyProfile.oneDriveFolder', ['id' => request()->route('id')]) }}"
                                class="btn btn-primary me-2">OneDrive Folder</a>
                            <a href="{{ route('companyProfile.config', ['id' => request()->route('id')]) }}"
                                class="btn btn-info text-dark me-2">Config</a>
                            <a href="{{ route('companyProfile.employee', ['id' => request()->route('id')]) }}"
                                class="btn btn-primary me-2">Employee</a>
                        </div>
                    </div>
                </div>

                <div class="card-body">
                    <form id="configForm"
                        action="{{ route('companyProfile.config.storeOrUpdate', ['companyProfileId' => request()->route('id')]) }}"
                        method="POST" enctype="multipart/form-data">
                        @csrf

                        <div id="keyValueContainer">

                            <!-- Certificate Header -->
                            <div class="row mb-3 key-value-pair">

                                <div class="col-md-5">

                                    <input type="text" name="key_value[certificate_header][key]"
                                        value="certificate_header" class="form-control" readonly>

                                    <input type="hidden" id="hidden_certificate_header"
                                        name="key_value[certificate_header][value]"
                                        value="{{ $settings['certificate_header']['value'] ?? '' }}">

                                    <input type="hidden" name="key_value[certificate_header][type]" value="file">

                                </div>

                                <div class="col-md-7">

                                    <div id="actions_certificate_header_upload" class="d-none">
                                        <label for="file_certificate_header" id="upload_label_certificate_header"
                                            class="btn btn-primary btn" style="cursor: pointer;">
                                            <i class="fa fa-upload"></i> Upload
                                        </label>

                                        <input type="file" id="file_certificate_header" class="d-none"
                                            name="certificate_header" onchange="handleFileChange('certificate_header')"
                                            accept="image/*">

                                        <a href="{{ url('storage/header.jpeg') }}" target="_blank"
                                            class="btn btn-warning text-dark ms-2">Sample Certificate Header</a>
                                    </div>

                                    <div id="actions_certificate_header" class="d-none">
                                        <button type="button" class="btn btn-primary me-2" id="view_certificate_header">
                                            <i class="fa fa-eye"></i> View
                                        </button>
                                        <button type="button" class="btn btn-danger" id="cancel_certificate_header">
                                            <i class="fa fa-times"></i> Cancel
                                        </button>
                                    </div>

                                </div>
                            </div>

                            <!-- Certificate Footer -->
                            <div class="row mb-3 key-value-pair">

                                <div class="col-md-5">

                                    <input type="text" name="key_value[certificate_footer][key]"
                                        value="certificate_footer" class="form-control" readonly>

                                    <input type="hidden" id="hidden_certificate_footer"
                                        name="key_value[certificate_footer][value]"
                                        value="{{ $settings['certificate_footer']['value'] ?? '' }}">

                                    <input type="hidden" name="key_value[certificate_footer][type]" value="file">

                                </div>

                                <div class="col-md-7">

                                    <div id="actions_certificate_footer_upload" class="d-none">
                                        <label for="file_certificate_footer" id="upload_label_certificate_footer"
                                            class="btn btn-primary btn" style="cursor: pointer;">
                                            <i class="fa fa-upload"></i> Upload
                                        </label>

                                        <input type="file" id="file_certificate_footer" class="d-none"
                                            name="certificate_footer" onchange="handleFileChange('certificate_footer')"
                                            accept="image/*">

                                        <a href="{{ url('storage/footer.jpeg') }}" target="_blank"
                                            class="btn btn-warning text-dark ms-2">Sample Certificate Footer</a>
                                    </div>

                                    <div id="actions_certificate_footer" class="d-none">
                                        <button type="button" class="btn btn-primary me-2" id="view_certificate_footer">
                                            <i class="fa fa-eye"></i> View
                                        </button>
                                        <button type="button" class="btn btn-danger" id="cancel_certificate_footer">
                                            <i class="fa fa-times"></i> Cancel
                                        </button>
                                    </div>

                                </div>
                            </div>

                            <!-- Color Picker -->
                            <div class="row mb-3 key-value-pair">
                                <div class="col-md-5">
                                    <input type="text" name="key_value[color_picker][key]" value="color_picker"
                                        class="form-control" required readonly>
                                    <input type="hidden" name="key_value[color_picker][type]" value="text">
                                </div>
                                <div class="col-md-5">
                                    <input type="color" name="key_value[color_picker][value]"
                                        value="{{ $settings['color_picker']['value'] ?? '#000000' }}" class="form-control form-control-color" required>
                                </div>
                            </div>

                            <!-- Company Logo -->
                            <div class="row mb-3 key-value-pair">

                                <div class="col-md-5">

                                    <input type="text" name="key_value[company_logo][key]" value="company_logo"
                                        class="form-control" readonly>

                                    <input type="hidden" id="hidden_company_logo" name="key_value[company_logo][value]"
                                        value="{{ $settings['company_logo']['value'] ?? '' }}">

                                    <input type="hidden" name="key_value[company_logo][type]" value="file">

                                </div>

                                <div class="col-md-7">

                                    <div id="actions_company_logo_upload" class="d-none">
                                        <label for="file_company_logo" id="upload_label_company_logo"
                                            class="btn btn-primary btn" style="cursor: pointer;">
                                            <i class="fa fa-upload"></i> Upload
                                        </label>

                                        <input type="file" id="file_company_logo" class="d-none" name="company_logo"
                                            onchange="handleFileChange('company_logo')" accept="image/*">

                                        <a href="{{ url('storage/company_logo.jpg') }}" target="_blank"
                                            class="btn btn-warning text-dark ms-2">Sample Logo</a>
                                    </div>

                                    <div id="actions_company_logo" class="d-none">
                                        <button type="button" class="btn btn-primary me-2" id="view_company_logo">
                                            <i class="fa fa-eye"></i> View
                                        </button>
                                        <button type="button" class="btn btn-danger" id="cancel_company_logo">
                                            <i class="fa fa-times"></i> Cancel
                                        </button>
                                    </div>

                                </div>
                            </div>

                            <!-- Excel File Upload -->
                            <div class="row mb-3 key-value-pair">
                                <div class="col-md-5">
                                    <input type="text" name="key_value[sample_group_b][key]" value="sample_group_b"
                                        class="form-control" required readonly id="excelFileKey">
                                    <input type="hidden" id="fileIdInput" name="key_value[sample_group_b][value]"
                                        value="{{ $settings['sample_group_b']['value'] ?? '' }}">
                                    <input type="hidden" name="key_value[sample_group_b][type]" value="file">
                                </div>

                                <div class="col-md-7">
                                    <div class="file-uploader">
                                        <label for="fileInput" id="uploadIcon" class="btn btn-primary btn"
                                            style="cursor: pointer;">
                                            <i class="fa fa-upload"></i> Upload
                                        </label>
                                        <input type="file" id="fileInput" name="file" class="d-none"
                                            onchange="uploadFile()" accept=".xls,.xlsx,.xml,.csv">

                                        <div id="fileActions" class="d-none">
                                            <button id="viewFile" class="btn btn-primary btn me-2">
                                                <i class="fa fa-eye"></i> View
                                            </button>
                                            <button id="cancelUpload" class="btn btn-danger btn">
                                                <i class="fa fa-times"></i> Cancel
                                            </button>
                                        </div>

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


                            <!-- Additional Static Fields with Backend Values -->
                            <div class="row mb-3 key-value-pair">
                                <div class="col-md-5">
                                    <input type="text" name="key_value[certificate_code][key]"
                                        value="certificate_code" class="form-control" required readonly>
                                    <input type="hidden" name="key_value[certificate_code][type]" value="text">
                                </div>
                                <div class="col-md-5">
                                    <input type="text" name="key_value[certificate_code][value]"
                                        value="{{ $settings['certificate_code']['value'] ?? '' }}"
                                        placeholder="certificate code" class="form-control" required>
                                </div>
                            </div>

                            <div class="row mb-3 key-value-pair">
                                <div class="col-md-5">
                                    <input type="text" name="key_value[job_no_key][key]" value="job_no_key"
                                        class="form-control" required readonly>
                                    <input type="hidden" name="key_value[job_no_key][type]" value="text">
                                </div>
                                <div class="col-md-5">
                                    <input type="text" name="key_value[job_no_key][value]"
                                        value="{{ $settings['job_no_key']['value'] ?? '' }}" placeholder="LB"
                                        class="form-control" required>
                                </div>
                            </div>

                            <div class="row mb-3 key-value-pair">
                                <div class="col-md-5">
                                    <input type="text" name="key_value[company_name][key]" value="company_name"
                                        class="form-control" required readonly>
                                    <input type="hidden" name="key_value[company_name][type]" value="text">
                                </div>
                                <div class="col-md-5">
                                    <input type="text" name="key_value[company_name][value]"
                                        value="{{ $settings['company_name']['value'] ?? '' }}" placeholder="company_name"
                                        class="form-control" required>
                                </div>
                            </div>

                            <div class="row mb-3 key-value-pair">
                                <div class="col-md-5">
                                    <input type="text" name="key_value[address_field][key]" value="address_field"
                                        class="form-control" required readonly>
                                    <input type="hidden" name="key_value[address_field][type]" value="text">
                                </div>
                                <div class="col-md-5">
                                    <select name="key_value[address_field][value]" class="form-control">
                                        <option value="full"
                                            {{ isset($settings['address_field']['value']) && $settings['address_field']['value'] == 'full' ? 'selected' : '' }}>
                                            Full</option>
                                        <option value="minimal"
                                            {{ isset($settings['address_field']['value']) && $settings['address_field']['value'] == 'minimal' ? 'selected' : '' }}>
                                            Minimal
                                        </option>
                                    </select>
                                </div>
                            </div>

                            <div class="row mb-3 key-value-pair">
                                <div class="col-md-5">
                                    <input type="text" name="key_value[formated_sr_no][key]" value="formated_sr_no"
                                        class="form-control" required readonly>
                                    <input type="hidden" name="key_value[formated_sr_no][type]" value="text">
                                </div>
                                <div class="col-md-5">
                                    <select name="key_value[formated_sr_no][value]" class="form-control">
                                        <option value="yes"
                                            {{ isset($settings['formated_sr_no']['value']) && $settings['formated_sr_no']['value'] == 'yes' ? 'selected' : '' }}>
                                            Yes</option>
                                        <option value="no"
                                            {{ isset($settings['formated_sr_no']['value']) && $settings['formated_sr_no']['value'] == 'no' ? 'selected' : '' }}>
                                            No</option>
                                    </select>
                                </div>
                            </div>

                            <div class="row mb-3 key-value-pair">
                                <div class="col-md-5">
                                    <input type="text" name="key_value[fasttrack_mode][key]" value="fasttrack_mode"
                                        class="form-control" required readonly>
                                    <input type="hidden" name="key_value[fasttrack_mode][type]" value="text">
                                </div>
                                <div class="col-md-5">
                                    <select name="key_value[fasttrack_mode][value]" class="form-control">
                                        <option value="yes"
                                            {{ isset($settings['fasttrack_mode']['value']) && $settings['fasttrack_mode']['value'] == 'yes' ? 'selected' : '' }}>
                                            Yes</option>
                                        <option value="no"
                                            {{ isset($settings['fasttrack_mode']['value']) && $settings['fasttrack_mode']['value'] == 'no' ? 'selected' : '' }}>
                                            No</option>
                                    </select>
                                </div>
                            </div>

                            <div class="row mb-3 key-value-pair">
                                <div class="col-md-5">
                                    <input type="text" name="key_value[calibration][key]" value="calibration"
                                        class="form-control" required readonly>
                                    <input type="hidden" name="key_value[calibration][type]" value="text">
                                </div>
                                <div class="col-md-5">
                                    <input type="text" name="key_value[calibration][value]"
                                        value="{{ $settings['calibration']['value'] ?? '' }}" placeholder="calibration"
                                        class="form-control" required>
                                </div>
                            </div>

                            <div class="row mb-3 key-value-pair">
                                <div class="col-md-5">
                                    <input type="text" name="key_value[certificate][key]" value="certificate"
                                        class="form-control" required readonly>
                                    <input type="hidden" name="key_value[certificate][type]" value="text">
                                </div>
                                <div class="col-md-5">
                                    <input type="text" name="key_value[certificate][value]"
                                        value="{{ $settings['certificate']['value'] ?? '' }}" placeholder="certificate"
                                        class="form-control" required>
                                </div>
                            </div>

                            <div class="row mb-3 key-value-pair">
                                <div class="col-md-5">
                                    <input type="text" name="key_value[authorisation][key]" value="authorisation"
                                        class="form-control" required readonly>
                                    <input type="hidden" name="key_value[authorisation][type]" value="text">
                                </div>
                                <div class="col-md-5">
                                    <input type="text" name="key_value[authorisation][value]"
                                        value="{{ $settings['authorisation']['value'] ?? '' }}"
                                        placeholder="authorisation" class="form-control" required>
                                </div>
                            </div>

                            <div class="row mb-3 key-value-pair">
                                <div class="col-md-5">
                                    <input type="text" name="key_value[work_receipt_form_term_and_condition][key]"
                                        value="work_receipt_form_term_and_condition" class="form-control" required
                                        readonly>
                                    <input type="hidden" name="key_value[work_receipt_form_term_and_condition][type]"
                                        value="text">
                                </div>
                                <div class="col-md-5">
                                    <textarea name="key_value[work_receipt_form_term_and_condition][value]"
                                        placeholder="Work Receipt Form Term and Condition" class="form-control large-textarea"
                                        style="
                                    width: 100%;
                                    min-height: 200px;
                                    max-height: 400px;
                                    height: auto;
                                    padding: 10px;
                                    font-size: 14px;
                                    line-height: 1.5;
                                    border: 1px solid #ccc;
                                    border-radius: 5px;
                                    resize: vertical;
                                    overflow-y: auto;
                                    white-space: pre-wrap;"
                                        required>{{ $settings['work_receipt_form_term_and_condition']['value'] ?? '' }}</textarea>
                                </div>
                            </div>

                            <!-- Invoice Bank Details -->
                            <div class="row mb-3 key-value-pair">
                                <div class="col-md-5">
                                    <input type="text" name="key_value[invoice_bank_details][key]"
                                        value="invoice_bank_details" class="form-control" required readonly>
                                    <input type="hidden" name="key_value[invoice_bank_details][type]" value="text">
                                </div>
                                <div class="col-md-5">
                                    <textarea name="key_value[invoice_bank_details][value]" placeholder="Invoice Bank Details"
                                        class="form-control large-textarea"
                                        style="
                                    width: 100%;
                                    min-height: 200px;
                                    max-height: 400px;
                                    height: auto;
                                    padding: 10px;
                                    font-size: 14px;
                                    line-height: 1.5;
                                    border: 1px solid #ccc;
                                    border-radius: 5px;
                                    resize: vertical;
                                    overflow-y: auto;
                                    white-space: pre-wrap;"
                                        required>{{ $settings['invoice_bank_details']['value'] ?? '' }}</textarea>
                                </div>
                            </div>

                            <div class="row mb-3 key-value-pair">
                                <div class="col-md-5">
                                    <input type="text" name="key_value[invoice_term_and_condition][key]"
                                        value="invoice_term_and_condition" class="form-control" required readonly>
                                    <input type="hidden" name="key_value[invoice_term_and_condition][type]"
                                        value="text">
                                </div>
                                <div class="col-md-5">
                                    <textarea name="key_value[invoice_term_and_condition][value]" placeholder="Invoice Term and Conditions"
                                        class="form-control large-textarea"
                                        style="
                                    width: 100%;
                                    min-height: 200px;
                                    max-height: 400px;
                                    height: auto;
                                    padding: 10px;
                                    font-size: 14px;
                                    line-height: 1.5;
                                    border: 1px solid #ccc;
                                    border-radius: 5px;
                                    resize: vertical;
                                    overflow-y: auto;
                                    white-space: pre-wrap;"
                                        required>{{ $settings['invoice_term_and_condition']['value'] ?? '' }}</textarea>
                                </div>
                            </div>

                            <div class="row mb-3 key-value-pair">
                                <div class="col-md-5">
                                    <input type="text" name="key_value[invoice_specific_required][key]"
                                        value="invoice_specific_required" class="form-control" required readonly>
                                    <input type="hidden" name="key_value[invoice_specific_required][type]"
                                        value="text">
                                </div>
                                <div class="col-md-5">
                                    <textarea name="key_value[invoice_specific_required][value]" placeholder="Invoice Some Specific Data Required"
                                        class="form-control large-textarea"
                                        style="
                                    width: 100%;
                                    min-height: 200px;
                                    max-height: 400px;
                                    height: auto;
                                    padding: 10px;
                                    font-size: 14px;
                                    line-height: 1.5;
                                    border: 1px solid #ccc;
                                    border-radius: 5px;
                                    resize: vertical;
                                    overflow-y: auto;
                                    white-space: pre-wrap;"
                                        required>{{ $settings['invoice_specific_required']['value'] ?? '' }}</textarea>
                                </div>
                            </div>
                            <div class="row mb-3 key-value-pair">
                                <div class="col-md-5">
                                    <input type="text" name="key_value[sac_code][key]" value="sac_code"
                                        class="form-control" required readonly>
                                    <input type="hidden" name="key_value[sac_code][type]" value="text">
                                </div>
                                <div class="col-md-5">
                                    <input type="text" name="key_value[sac_code][value]"
                                        value="{{ $settings['sac_code']['value'] ?? '' }}" placeholder="sac_code"
                                        class="form-control">
                                </div>
                            </div>

                            <!-- Regular Key-Value Inputs -->
                            @foreach ($settings as $key => $value)
                                @if (
                                    !in_array($key, [
                                        'certificate_header',
                                        'certificate_footer',
                                        'color_picker',
                                        'company_logo',
                                        'certificate_code',
                                        'job_no_key',
                                        'company_name',
                                        'address_field',
                                        'formated_sr_no',
                                        'fasttrack_mode',
                                        'sample_group_b',
                                        'calibration',
                                        'certificate',
                                        'authorisation',
                                        'work_receipt_form_term_and_condition',
                                        'invoice_specific_required',
                                        'invoice_term_and_condition',
                                        'invoice_bank_details',
                                        'sac_code',
                                    ]))
                                    <div class="row mb-3 key-value-pair dynamic_data" data-index="{{ $loop->index }}">
                                        <div class="col-md-5">
                                            <input type="text" name="key_value[{{ $loop->index }}][key]"
                                                value="{{ $key }}" class="form-control"
                                                data-index="{{ $loop->index }}">
                                            <input type="hidden" id="hidden_file_{{ $loop->index }}"
                                                name="key_value[{{ $loop->index }}][value]"
                                                value="{{ $value['value'] ?? $value }}">
                                            <input type="hidden" name="key_value[{{ $loop->index }}][type]"
                                                value="{{ $value['type'] }}">
                                        </div>
                                        <div class="col-md-5">
                                            @if ($value['type'] === 'file')
                                                <!-- File handling UI -->
                                                <label for="file_{{ $loop->index }}"
                                                    id="upload_label_{{ $loop->index }}"
                                                    class="btn btn-primary btn upload-button" style="cursor: pointer;">
                                                    <i class="fa fa-upload"></i> Upload
                                                </label>
                                                <input type="file" id="file_{{ $loop->index }}"
                                                    class="d-none file-input"
                                                    name="key_value[{{ $loop->index }}][file]">
                                                <div id="actions_{{ $loop->index }}" class="d-none actions">
                                                    <button type="button" class="btn btn-primary me-2 view-button"
                                                        data-url="{{ $value['value'] ?? '#' }}"
                                                        data-index="{{ $loop->index }}">
                                                        <i class="fa fa-eye"></i> View
                                                    </button>
                                                    <button type="button" class="btn btn-danger cancel-button"
                                                        data-index="{{ $loop->index }}">
                                                        <i class="fa fa-times"></i> Cancel
                                                    </button>
                                                </div>
                                            @elseif ($value['type'] === 'checkbox')
                                                <!-- Checkbox (True/False) UI -->
                                                <div class="d-flex justify-content-start">
                                                    <div class="form-check">
                                                        <input type="radio" id="true_{{ $loop->index }}"
                                                            name="key_value[{{ $loop->index }}][value]" value="true"
                                                            class="form-check-input"
                                                            {{ isset($value['value']) && $value['value'] === 'true' ? 'checked' : '' }}>
                                                        <label class="form-check-label me-3"
                                                            for="true_{{ $loop->index }}">True</label>
                                                    </div>
                                                    <div class="form-check">
                                                        <input type="radio" id="false_{{ $loop->index }}"
                                                            name="key_value[{{ $loop->index }}][value]" value="false"
                                                            class="form-check-input"
                                                            {{ isset($value['value']) && $value['value'] === 'false' ? 'checked' : '' }}>
                                                        <label class="form-check-label"
                                                            for="false_{{ $loop->index }}">False</label>
                                                    </div>
                                                </div>
                                            @else
                                                <!-- Text input UI -->
                                                <input type="text" name="key_value[{{ $loop->index }}][value]"
                                                    value="{{ $value['value'] }}" class="form-control">
                                            @endif
                                        </div>
                                        <div class="col-md-2 d-flex justify-content-between">
                                            <button type="button" class="btn btn-danger" onclick="removeRow(this)"><i
                                                    class="fa fa-trash"></i> Remove</button>
                                        </div>
                                    </div>
                                @endif
                            @endforeach

                        </div>

                        <!-- Add button to add new dynamic rows -->
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="dropdown">
                                <button class="btn btn-primary mt-3 dropdown-toggle" type="button"
                                    id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
                                    Add New
                                </button>
                                <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                    <li><button class="dropdown-item" type="button" onclick="addNewRowText()">Add New
                                            Key-Value</button></li>
                                    <li><button class="dropdown-item" type="button" onclick="addNewRowFile()">Add New
                                            Key-File</button></li>
                                    <li><button class="dropdown-item" type="button" onclick="addNewRowCheckBox()">Add
                                            New
                                            Check-Box</button></li>
                                </ul>
                            </div>
                            <div>
                                <button type="button" class="btn btn-success" onclick="validateAndOpenModal()">Save
                                    Configurations</button>

                                <!-- Config_key asking Modal Section -->
                                <div class="modal fade" id="configKeyModal" tabindex="-1" role="dialog"
                                    aria-labelledby="configKeyModalLabel" aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="configKeyModalLabel">Enter Config Key</h5>
                                            </div>
                                            <div class="modal-body">
                                                <div class="form-group">
                                                    <label for="config_key">Config Key</label>
                                                    <input type="text" class="form-control" id="config_key"
                                                        name="config_key" required>
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <!-- Modal Submit Button -->
                                                <button type="submit" class="btn btn-primary">Submit</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <a href="{{ route('companyProfile.show') }}" class="btn btn-danger">Close</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script>
        //Remove button
        function removeRow(button) {
            button.closest('.key-value-pair').remove();
        }

        //Add Text
        function addNewRowText() {
            const container = document.getElementById('keyValueContainer');
            const index = container.children.length;
            const newRow = document.createElement('div');
            newRow.classList.add('row', 'mb-3', 'key-value-pair');
            newRow.innerHTML = `
                    <div class="col-md-5">
                        <input type="text" name="key_value[${index}][key]" placeholder="Enter Key" class="form-control" required>
                        <input type="hidden" name="key_value[${index}][type]" value="text">
                    </div>
                    <div class="col-md-5">
                        <input type="text" name="key_value[${index}][value]" placeholder="Enter Value" class="form-control" required>
                    </div>
                    <div class="col-md-2 d-flex justify-content-between">
                        <button type="button" class="btn btn-danger" onclick="removeRow(this)"><i class="fa fa-trash"></i> Remove</button>
                    </div>
                `;
            container.appendChild(newRow);
        }

        //Add CheckBox
        function addNewRowCheckBox() {
            const container = document.getElementById('keyValueContainer');
            const index = container.children.length;
            const newRow = document.createElement('div');
            newRow.classList.add('row', 'mb-3', 'key-value-pair');
            newRow.innerHTML = `
                   <div class="col-md-5">
                        <input type="text" name="key_value[${index}][key]" placeholder="Enter Key" class="form-control" required>
                        <input type="hidden" name="key_value[${index}][type]" value="checkbox">
                    </div>
                    <div class="col-md-5">
                        <div class="d-flex justify-content-start align-items-center">
                            <div class="form-check">
                                <input type="radio" id="true_${index}" name="key_value[${index}][value]" value="true" class="form-check-input" checked>
                                <label class="form-check-label me-3" for="true_${index}">True</label>
                            </div>
                            <div class="form-check">
                                <input type="radio" id="false_${index}" name="key_value[${index}][value]" value="false" class="form-check-input">
                                <label class="form-check-label" for="false_${index}">False</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2 d-flex justify-content-between align-items-center">
                        <button type="button" class="btn btn-danger" onclick="removeRow(this)">
                            <i class="fa fa-trash"></i> Remove
                        </button>
                    </div>
                `;
            container.appendChild(newRow);
        }

        //For dynamic showing filds
        document.addEventListener('DOMContentLoaded', () => {
            // Handle file change
            document.querySelectorAll('.file-input').forEach(fileInput => {
                const index = fileInput.id.split('_')[1]; // Extract index from ID
                const uploadLabel = document.querySelector(`#upload_label_${index}`);
                const actions = document.querySelector(`#actions_${index}`);
                const hiddenFile = document.querySelector(`#hidden_file_${index}`);

                if (hiddenFile && hiddenFile.value) {
                    uploadLabel.classList.add('d-none');
                    actions.classList.remove('d-none');
                } else {
                    uploadLabel.classList.remove('d-none');
                    actions.classList.add('d-none');
                }

                fileInput.addEventListener('change', function() {
                    if (this.files.length > 0) {
                        const fileName = this.files[0].name;
                        hiddenFile.value = fileName;

                        uploadLabel.classList.add('d-none');
                        actions.classList.remove('d-none');
                    }
                });
            });

            // Dynamically update file input name when key input changes
            document.querySelectorAll('.dynamic_data').forEach(row => {
                const keyInput = row.querySelector('input[name^="key_value"][name$="[key]"]');
                const index = row.dataset.index;
                const fileInput = row.querySelector(`#file_${index}`);


                const initialKeyValue = keyInput.value.trim();
                if (initialKeyValue && fileInput) {
                    fileInput.name = initialKeyValue;
                }

                keyInput.addEventListener('input', function() {
                    const newKey = this.value.trim();
                    if (fileInput) {
                        fileInput.name = newKey;
                    }
                });
            });

            // Handle View button click
            document.querySelectorAll('.view-button').forEach(viewButton => {
                viewButton.addEventListener('click', function() {
                    const index = this.getAttribute('data-index');
                    const fileInput = document.querySelector(`#file_${index}`);
                    const hiddenFile = document.querySelector(`#hidden_file_${index}`);

                    if (fileInput && fileInput.files.length > 0) {
                        const fileUrl = URL.createObjectURL(fileInput.files[0]);
                        window.open(fileUrl, '_blank');
                    } else if (hiddenFile && hiddenFile.value) {
                        const fileUrl = hiddenFile.value;
                        window.open("/storage/" + fileUrl, '_blank');
                    }
                });
            });

            // Handle Cancel button click
            document.querySelectorAll('.cancel-button').forEach(cancelButton => {
                cancelButton.addEventListener('click', function() {
                    const index = this.getAttribute('data-index');
                    const uploadLabel = document.querySelector(`#upload_label_${index}`);
                    const actions = document.querySelector(`#actions_${index}`);
                    const fileInput = document.querySelector(`#file_${index}`);
                    const hiddenFile = document.querySelector(`#hidden_file_${index}`);

                    fileInput.value = '';
                    hiddenFile.value = '';
                    uploadLabel.classList.remove('d-none');
                    actions.classList.add('d-none');
                });
            });
        });


        //For dynamic File Upload
        document.addEventListener("DOMContentLoaded", function() {
            const container = document.getElementById('keyValueContainer');

            function createButtonEventListeners(index) {
                const fileInput = document.getElementById(`file_${index}`);
                const viewButton = document.getElementById(`view_${index}`);
                const cancelButton = document.getElementById(`cancel_${index}`);

                // Event listener for file input
                fileInput.addEventListener("change", () => handleFileChange(index));

                // Event listener for view button
                viewButton.addEventListener("click", () => viewFile(index));

                // Event listener for cancel button
                cancelButton.addEventListener("click", () => cancelFile(index));
            }

            function handleFileChange(index) {
                const fileInput = document.getElementById(`file_${index}`);
                const uploadLabel = document.getElementById(`upload_label_${index}`);
                const actionsDiv = document.getElementById(`actions_${index}`);
                const viewButton = document.getElementById(`view_${index}`);

                if (fileInput.files.length > 0) {
                    const file = fileInput.files[0];
                    const tempUrl = URL.createObjectURL(file);
                    viewButton.dataset.fileUrl = tempUrl;

                    uploadLabel.classList.add("d-none");
                    actionsDiv.classList.remove("d-none");
                }
            }

            function cancelFile(index) {
                const fileInput = document.getElementById(`file_${index}`);
                const uploadLabel = document.getElementById(`upload_label_${index}`);
                const actionsDiv = document.getElementById(`actions_${index}`);

                fileInput.value = "";
                uploadLabel.classList.remove("d-none");
                actionsDiv.classList.add("d-none");
            }

            function viewFile(index) {
                const viewButton = document.getElementById(`view_${index}`);

                if (viewButton.dataset.fileUrl) {
                    window.open(viewButton.dataset.fileUrl, "_blank");
                }
            }

            // Expose the functions globally
            window.addNewRowFile = function() {
                const index = container.children.length;
                const newRow = document.createElement('div');
                newRow.classList.add('row', 'mb-3', 'key-value-pair');
                newRow.innerHTML = `
                        <div class="col-md-5">
                            <input type="text" name="key_value[${index}][key]" placeholder="Enter Key" class="form-control" id="key_input_${index}" required>
                            <input type="hidden" name="key_value[${index}][type]" value="file">
                        </div>
                        <div class="col-md-5">
                            <label for="file_${index}" id="upload_label_${index}" class="btn btn-primary btn" style="cursor: pointer;">
                                <i class="fa fa-upload"></i> Upload
                            </label>
                            <input type="file" id="file_${index}" class="d-none" name="${index}" >
                            <div id="actions_${index}" class="d-none">
                                <button type="button" class="btn btn-primary me-2" id="view_${index}">
                                    <i class="fa fa-eye"></i> View
                                </button>
                                <button type="button" class="btn btn-danger" id="cancel_${index}">
                                    <i class="fa fa-times"></i> Cancel
                                </button>
                            </div>
                        </div>
                        <div class="col-md-2 d-flex justify-content-between">
                            <button type="button" class="btn btn-danger" onclick="removeRow(this)"><i class="fa fa-trash"></i> Remove</button>
                        </div>
                    `;

                const keyInput = newRow.querySelector(`#key_input_${index}`);
                const fileInput = newRow.querySelector(`#file_${index}`);

                keyInput.addEventListener('input', () => {
                    fileInput.setAttribute('name', keyInput.value.trim());
                });

                container.appendChild(newRow);

                // Attach event listeners to the newly added row
                createButtonEventListeners(index);
            };

            window.removeRow = function(button) {
                const row = button.closest('.row');
                if (row) row.remove();
            };
        });


        //For certificate header, footer, company_logo
        document.addEventListener("DOMContentLoaded", function() {

            setupFileField(
                "hidden_certificate_header",
                "file_certificate_header",
                "actions_certificate_header_upload",
                "actions_certificate_header",
                "view_certificate_header",
                "cancel_certificate_header"
            );

            setupFileField(
                "hidden_certificate_footer",
                "file_certificate_footer",
                "actions_certificate_footer_upload",
                "actions_certificate_footer",
                "view_certificate_footer",
                "cancel_certificate_footer"
            );

            setupFileField(
                "hidden_company_logo",
                "file_company_logo",
                "actions_company_logo_upload",
                "actions_company_logo",
                "view_company_logo",
                "cancel_company_logo"
            );

            function setupFileField(hiddenId, fileInputId, labelId, actionsDivId, viewBtnId, cancelBtnId) {
                const hiddenInput = document.getElementById(hiddenId);
                const fileInput = document.getElementById(fileInputId);
                const uploadLabel = document.getElementById(labelId);
                const actionsDiv = document.getElementById(actionsDivId);
                const viewBtn = document.getElementById(viewBtnId);
                const cancelBtn = document.getElementById(cancelBtnId);

                if (hiddenInput.value) {
                    uploadLabel.classList.add("d-none");
                    actionsDiv.classList.remove("d-none");
                } else {
                    uploadLabel.classList.remove("d-none");
                    actionsDiv.classList.add("d-none");
                }

                fileInput.addEventListener("change", function() {
                    const file = fileInput.files[0];
                    if (file && file.type.startsWith("image/")) {
                        const tempUrl = URL.createObjectURL(file);
                        viewBtn.dataset.newImageUrl = tempUrl; // Store temporary image URL
                        viewBtn.dataset.savedImageUrl = ""; // Clear saved image
                    }
                    uploadLabel.classList.add("d-none");
                    actionsDiv.classList.remove("d-none");
                });

                viewBtn.addEventListener("click", function() {
                    if (viewBtn.dataset.newImageUrl) {
                        window.open(viewBtn.dataset.newImageUrl, "_blank");
                    } else if (hiddenInput.value) {
                        window.open("/storage/" + hiddenInput.value, "_blank");
                    }
                });

                cancelBtn.addEventListener("click", function() {
                    fileInput.value = "";
                    uploadLabel.classList.remove("d-none");
                    actionsDiv.classList.add("d-none");
                });
            }

            window.handleFileChange = function(fieldType) {
                const fileInput = document.getElementById(`file_${fieldType}`);
                const hiddenInput = document.getElementById(`hidden_${fieldType}`);

                if (fileInput.files.length > 0) {
                    const file = fileInput.files[0];
                    hiddenInput.value = "";
                }
            };
        });

        //For submit configKey
        function validateAndOpenModal() {

            const form = document.getElementById('configForm');

            const requiredFields = form.querySelectorAll('[required]:not(#config_key)');

            let isValid = true;
            requiredFields.forEach(field => {
                if (!field.value.trim()) {
                    isValid = false;
                }
            });

            if (isValid) {
                const modalElement = document.getElementById('configKeyModal');
                const modalInstance = bootstrap.Modal.getOrCreateInstance(modalElement);
                modalInstance.show();
            } else {
                form.reportValidity();
            }
        }

        //For sample_group_b
        document.addEventListener('DOMContentLoaded', function() {
            const fileInput = document.getElementById('fileInput');
            const uploadIcon = document.getElementById('uploadIcon');
            const fileActions = document.getElementById('fileActions');
            const viewFile = document.getElementById('viewFile');
            const cancelUpload = document.getElementById('cancelUpload');
            const fileIdInput = document.getElementById('fileIdInput');

            if (fileIdInput.value) {
                uploadIcon.classList.add('d-none');
                fileActions.classList.remove('d-none');
            } else {
                uploadIcon.classList.remove('d-none');
                fileActions.classList.add('d-none');
            }

            fileInput.addEventListener('change', uploadFile);

            cancelUpload.addEventListener('click', function() {
                fileInput.value = '';
                uploadIcon.classList.remove('d-none');
                fileActions.classList.add('d-none');
                fileIdInput.value = '';
            });

            viewFile.addEventListener('click', function() {
                document.getElementById('loader').style.display = 'flex';

                const formData = new FormData();
                const companyProfileId = "{{ request()->id }}";
                const fileId = fileIdInput.value;

                formData.append('companyProfileId', companyProfileId);
                formData.append('fileId', fileId);

                fetch('/companyProfile/config/file/watch', {
                        method: 'POST',
                        body: formData,
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        }
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.webUrl) {
                            window.open(data.webUrl);
                        } else {
                            console.error('Error: File URL not found');
                        }
                    })
                    .catch(error => console.error('Error fetching file URL:', error))
                    .finally(() => {
                        document.getElementById('loader').style.display = 'none';
                    });
            });

            function uploadFile() {
                const file = fileInput.files[0];

                document.getElementById('loader').style.display = 'flex';

                const formData = new FormData();
                const companyProfileId = "{{ request()->id }}";

                formData.append('file', file);

                fetch(`/companyProfile/config/file/save/${companyProfileId}`, {
                        method: 'POST',
                        body: formData,
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        }
                    })
                    .then(response => {
                        if (!response.ok) {
                            return response.json().then(errData => {
                                console.error('Validation error:', errData.message);
                                alert(errData.message || 'An unknown error occurred.');
                                throw new Error(errData.message || 'Validation failed.');
                            });
                        }
                        return response.json();
                    })
                    .then(data => {
                        if (data.success) {
                            fileIdInput.value = data.data;
                            uploadIcon.classList.add('d-none');
                            fileActions.classList.remove('d-none');
                        } else {
                            throw new Error(data.message || 'File upload failed.');
                        }
                    })
                    .catch(error => console.error('Error fetching file URL:', error))
                    .finally(() => {
                        document.getElementById('loader').style.display = 'none';
                    });

            }
        });
    </script>
@endsection