@php
$addFilePermission = user()->permission('add_project_files');
$viewFilePermission = user()->permission('view_project_files');
$deleteFilePermission = user()->permission('delete_project_files');
@endphp

<link rel="stylesheet" href="{{ asset('vendor/css/dropzone.min.css') }}">

<style>
    .file-action {
        visibility: hidden;
    }

    .file-card:hover .file-action {
        visibility: visible;
    }

</style>

<!-- TAB CONTENT START -->
<div class="tab-pane fade show active mt-5" role="tabpanel" aria-labelledby="nav-email-tab">

    <x-cards.data :title="__('Custom Fields')">
        <div class="tab-content">
        
            <form id="updateCustomFieldsForm">
                @csrf
                @foreach($project->customFields as $customField)
                    <div class="col-lg-8 col-md-8 mb-3">
                        @if($customField->field->field_type === 'text' || $customField->field->field_type === 'number')
                            <x-forms.text 
                                :fieldLabel="$customField->field->field_display_name"
                                fieldName="custom_fields[{{ $customField->id }}]"
                                fieldId="custom_field_{{ $customField->id }}"
                                fieldRequired="false"
                                :fieldValue="$customField->field_value"
                                fieldPlaceholder="Enter {{$customField->field->field_display_name}}"
                                :fieldType="$customField->field->field_type"
                            />
                        @elseif($customField->field->field_type === 'dropdown')
                            <x-forms.select 
                                fieldId="custom_field_{{ $customField->id }}"
                                :fieldLabel="$customField->field->field_display_name"
                                fieldName="custom_fields[{{ $customField->id }}]"
                                search="true"
                                data-live-search="true"
                                data-size="8"
                            >
                                @foreach(explode(',', $customField->field->field_values) as $option)
                                    <option value="{{ trim($option) }}" 
                                            {{ trim($customField->field_value) == trim($option) ? 'selected' : '' }}>
                                        {{ trim($option) }}
                                    </option>
                                @endforeach
                            </x-forms.select>
                        @elseif($customField->field->field_type === 'checkbox')
                            <x-forms.checkbox 
                                :fieldLabel="$customField->field->field_display_name"
                                fieldName="custom_fields[{{ $customField->id }}]"
                                fieldId="custom_field_{{ $customField->id }}"
                                :checked="$customField->field_value == '1'"
                            />
                        @elseif($customField->field->field_type === 'radio')
                            <x-forms.label :fieldLabel="$customField->field->field_display_name" />
                            <div class="d-flex">
                                @foreach(explode(',', $customField->field->field_values) as $option)
                                    <x-forms.radio 
                                        fieldId="custom_field_{{ $customField->id }}_{{ trim($option) }}"
                                        fieldName="custom_fields[{{ $customField->id }}]"
                                        :fieldLabel="trim($option)"
                                        :fieldValue="trim($option)"
                                        :checked="trim($customField->field_value) == trim($option)"
                                    />
                                @endforeach
                            </div>
                        @elseif($customField->field->field_type === 'date')
                            <x-forms.datepicker 
                                fieldId="custom_field_{{ $customField->id }}"
                                :fieldLabel="$customField->field->field_display_name"
                                fieldName="custom_fields[{{ $customField->id }}]"
                                :fieldValue="$customField->field_value"
                                fieldPlaceholder="Select date"
                            />
                        @endif
                    </div>
                @endforeach
                <button type="button" onclick="submitCustomFields()" class="btn btn-primary">Save Custom Fields</button>
            </form>
            
            </div>
      
            

    <!-- Custom Fields Tab -->
   
</x-cards.data>
</div>


<script>
    function submitCustomFields() {
    $.ajax({
        url: "{{ route('projects.updateCustomFields', $project->id) }}",
        type: "POST",
        data: $('#updateCustomFieldsForm').serialize(),
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
        },
        success: function(response) {
            Swal.fire("Success!", response.message, "success");
        },
        error: function(xhr) {
            Swal.fire("Error!", "Could not update custom fields.", "error");
        }
    });
}


</script>