@php
// This file is now used to include form fields only - the main form structure is in _form.blade.php
// Redirecting to the appropriate page based on whether it's an edit or create operation
$isEdit = isset($record) && $record->exists;
$url = $isEdit ? route('customer-agent-type.edit', $record->id) : route('customer-agent-type.create');
header("Location: $url");
exit;
@endphp

            <div class="row">
                <!-- Tenant Dropdown -->
                @if(session('tenant_id'))
                <input type="hidden" name="tenant_id" value="{{ session('tenant_id') }}">
                @else
                <div class="col-md-6 mb-4">
                    <label for="tenant_id" class="form-label">Tenant <span class="required-field">*</span></label>
                    <select name="tenant_id" id="tenant_id" class="form-select form-control @error('tenant_id') is-invalid @enderror" required>
                        <option value="">Select Tenant</option>
                        @foreach($tenant_list as $key => $value)
                        <option value="{{ $key }}" {{ 
                                (!empty($record) && $record->tenant_id == $key) ? 'selected' : 
                                ($current_tenant_id == $key ? 'selected' : '') 
                            }}>
                            {{ $value }}
                        </option>
                        @endforeach
                    </select>
                    @error('tenant_id')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                    @enderror
                </div>
                @endif

                <!-- User Type Dropdown -->
                <div class="col-md-6 mb-4">
                    <label for="user_type_id" class="form-label">User Type <span class="required-field">*</span></label>
                    <select name="user_type_id" id="user_type_id" class="form-select form-control @error('user_type_id') is-invalid @enderror" required>
                        <option value="">Select User Type</option>
                        @foreach($user_types as $type)
                        <option value="{{ $type->id }}" {{ (!empty($record) && $record->user_type_id == $type->id) ? 'selected' : '' }}>
                            {{ $type->title }}
                        </option>
                        @endforeach
                    </select>
                    @error('user_type_id')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                    @enderror
                </div>
            </div>

            <div class="row">
                <!-- Title Field -->
                <div class="col-md-12 mb-4">
                    <label for="title" class="form-label">Title <span class="required-field">*</span></label>
                    <input type="text" name="title" id="title" class="form-control @error('title') is-invalid @enderror"
                        value="{{ old('title', !empty($record) ? $record->title : '') }}" required>
                    @error('title')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                    @enderror
                </div>
            </div>

            <!-- Options Section -->
            <div class="options-container">
                <h5 class="mb-3">Options</h5>
                <div class="row">
                    @if(count($options) > 0)
                    @foreach($options as $option)
                    <div class="col-md-4 mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox"
                                name="options[]"
                                id="option_{{ $option->id }}"
                                value="{{ $option->id }}"
                                {{ (!empty($settings) && isset($settings[$option->id])) ? 'checked' : '' }}>
                            <label class="form-check-label" for="option_{{ $option->id }}">
                                {{ $option->option }}
                            </label>
                        </div>
                    </div>
                    @endforeach
                    @else
                    <div class="col-md-12">
                        <div class="alert alert-info">
                            No options available. Please add options first.
                        </div>
                    </div>
                    @endif
                </div>
            </div>

            <div class="text-end mt-3">
                <a href="{{ route('customer-agent-type.index') }}" class="btn btn-dark waves-effect me-2">Cancel</a>
                <button type="submit" class="btn btn-primary">{{ !empty($record) ? 'Update' : 'Add' }} Type</button>
            </div>
        </form>
    </div>
</div>

@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        // Form validation
        $('#customerAgentTypeForm').submit(function(e) {
            var isValid = true;

            // Check if tenant is selected
            if ($('#tenant_id').val() === '') {
                e.preventDefault();
                $('#tenant_id').addClass('is-invalid');
                $('<div class="invalid-feedback">Please select a Tenant</div>').insertAfter('#tenant_id');
                isValid = false;
            } else {
                $('#tenant_id').removeClass('is-invalid');
                $('#tenant_id').next('.invalid-feedback').remove();
            }

            // Check if user type is selected
            if ($('#user_type_id').val() === '') {
                e.preventDefault();
                $('#user_type_id').addClass('is-invalid');
                $('<div class="invalid-feedback">Please select a User Type</div>').insertAfter('#user_type_id');
                isValid = false;
            } else {
                $('#user_type_id').removeClass('is-invalid');
                $('#user_type_id').next('.invalid-feedback').remove();
            }

            // Check if title is filled
            if ($('#title').val().trim() === '') {
                e.preventDefault();
                $('#title').addClass('is-invalid');
                $('<div class="invalid-feedback">Please enter a Title</div>').insertAfter('#title');
                isValid = false;
            } else {
                $('#title').removeClass('is-invalid');
                $('#title').next('.invalid-feedback').remove();
            }

            return isValid;
        });

        // Remove validation error when field changes
        $('#user_type_id, #title, #tenant_id').on('change keyup', function() {
            $(this).removeClass('is-invalid');
            $(this).next('.invalid-feedback').remove();
        });

        // Handle tenant change to update options
        $('#tenant_id').change(function() {
            var tenantId = $(this).val();

            if (tenantId) {
                // Show loading message in the options section
                $('.options-container .row').html('<div class="col-12 text-center"><i class="fas fa-spinner fa-spin"></i> Loading options...</div>');

                // Make AJAX request to get options for the selected tenant
                $.ajax({
                    url: '{{ route("customer-agent-type.search") }}',
                    type: 'GET',
                    data: {
                        tenant_id: tenantId,
                        get_options: true
                    },
                    success: function(response) {
                        // Clear the options container
                        var optionsContainer = $('.options-container .row');
                        optionsContainer.empty();

                        // If options are available, add them to the container
                        if (response.options && response.options.length > 0) {
                            $.each(response.options, function(index, option) {
                                var checkboxHtml = '<div class="col-md-4 mb-3">' +
                                    '<div class="form-check">' +
                                    '<input class="form-check-input" type="checkbox" ' +
                                    'name="options[]" ' +
                                    'id="option_' + option.id + '" ' +
                                    'value="' + option.id + '">' +
                                    '<label class="form-check-label" for="option_' + option.id + '">' +
                                    option.option +
                                    '</label>' +
                                    '</div>' +
                                    '</div>';

                                optionsContainer.append(checkboxHtml);
                            });
                        } else {
                            // If no options are available, show a message
                            optionsContainer.html('<div class="col-md-12"><div class="alert alert-info">No options available for this tenant. Please add options first.</div></div>');
                        }
                    },
                    error: function() {
                        $('.options-container .row').html('<div class="col-md-12"><div class="alert alert-danger">Error loading options. Please try again.</div></div>');
                    }
                });
            } else {
                // If no tenant is selected, show a message
                $('.options-container .row').html('<div class="col-md-12"><div class="alert alert-warning">Please select a tenant to see available options.</div></div>');
            }
        });
    });
</script>
@endsection