@php
    $isEdit = isset($data) && $data->exists;
    $tenant_id = session('tenant_id');
@endphp

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <form class="form-horizontal custom-validation" 
                      action="{{ $form_action }}" 
                      method="POST" 
                      id="schedule-email-form">
                    @csrf
                    @if($isEdit)
                        @method('PATCH')
                    @endif

                    @if(!session('tenant_id'))
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="tenant_id" class="form-label">Tenant <span class="text-danger">*</span></label>
                                    <select class="form-select select2 @error('tenant_id') is-invalid @enderror" id="tenant_id" name="tenant_id" required>
                                        <option value="">Select Tenant</option>
                                        @foreach($tenant_list ?? [] as $id => $name)
                                            <option value="{{ $id }}" {{ old('tenant_id', $isEdit ? $data->tenant_id : '') == $id ? 'selected' : '' }}>
                                                {{ $name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('tenant_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    @else
                        <input type="hidden" name="tenant_id" value="{{ $tenant_id }}">
                    @endif

                    <div class="row">
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label for="name" class="form-label">Name of schedule <span class="text-danger">*</span></label>
                                <input type="text" 
                                       class="form-control @error('name') is-invalid @enderror" 
                                       id="name" 
                                       name="name" 
                                       value="{{ old('name', $isEdit ? $data->name : '') }}" 
                                       maxlength="255"
                                       placeholder="Enter schedule name"
                                       required>
                                @error('name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="trigger_id" class="form-label">Select What Triggers This Schedule <span class="text-danger">*</span></label>
                                <select class="form-select select2 @error('trigger_id') is-invalid @enderror" 
                                        id="trigger_id" 
                                        name="trigger_id" 
                                        required>
                                    <option value="">Select Trigger</option>
                                    @foreach($triggers ?? [] as $trigger)
                                        <option value="{{ $trigger->id }}" 
                                                data-need-service="{{ $trigger->need_service ? 'true' : 'false' }}"
                                                {{ old('trigger_id', $isEdit ? $data->trigger_id : '') == $trigger->id ? 'selected' : '' }}>
                                            {{ $trigger->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('trigger_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="mb-3" id="service-field" style="display: none;">
                                <label for="service_id" class="form-label">Select service to trigger mail (optional)</label>
                                <select class="form-select select2 @error('service_id') is-invalid @enderror" 
                                        id="service_id" 
                                        name="service_id">
                                    <option value="">Select Service</option>
                                    @if($isEdit && $data->service)
                                        <option value="{{ $data->service->id }}" selected>
                                            {{ $data->service->service_name }}
                                        </option>
                                    @endif
                                </select>
                                @error('service_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="trigger_when" class="form-label">When to trigger <span class="text-danger">*</span></label>
                                <select class="form-select @error('trigger_when') is-invalid @enderror" 
                                        id="trigger_when" 
                                        name="trigger_when" 
                                        required>
                                    <option value="">Select</option>
                                    @foreach($trigger_when_options ?? [] as $value => $label)
                                        <option value="{{ $value }}" 
                                                {{ old('trigger_when', $isEdit ? $data->trigger_when : '') == $value ? 'selected' : '' }}>
                                            {{ $label }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('trigger_when')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="unit_type" class="form-label">Unit Type <span class="text-danger">*</span></label>
                                <select class="form-select @error('unit_type') is-invalid @enderror" 
                                        id="unit_type" 
                                        name="unit_type" 
                                        required>
                                    <option value="">Select</option>
                                    @foreach($unit_type_options ?? [] as $value => $label)
                                        <option value="{{ $value }}" 
                                                {{ old('unit_type', $isEdit ? $data->unit_type : '') == $value ? 'selected' : '' }}>
                                            {{ $label }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('unit_type')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="unit_value" class="form-label">Unit Value <span class="text-danger">*</span></label>
                                <input type="number" 
                                       class="form-control @error('unit_value') is-invalid @enderror" 
                                       id="unit_value" 
                                       name="unit_value" 
                                       value="{{ old('unit_value', $isEdit ? $data->unit_value : '') }}" 
                                       min="1"
                                       max="999"
                                       placeholder="Enter value"
                                       required>
                                @error('unit_value')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="who_will_receive" class="form-label">Who will receive <span class="text-danger">*</span></label>
                                <select class="form-select @error('who_will_receive') is-invalid @enderror" 
                                        id="who_will_receive" 
                                        name="who_will_receive" 
                                        required>
                                    <option value="">Select</option>
                                    @foreach($who_will_receive_options ?? [] as $value => $label)
                                        <option value="{{ $value }}" 
                                                {{ old('who_will_receive', $isEdit ? $data->who_will_receive : '') == $value ? 'selected' : '' }}>
                                            {{ $label }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('who_will_receive')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="email_template_id" class="form-label">Email content template <span class="text-danger">*</span></label>
                                <select class="form-select select2 @error('email_template_id') is-invalid @enderror" 
                                        id="email_template_id" 
                                        name="email_template_id" 
                                        required>
                                    <option value="">No Option</option>
                                    @foreach($email_templates ?? [] as $template)
                                        <option value="{{ $template->id }}" 
                                                {{ old('email_template_id', $isEdit ? $data->email_template_id : '') == $template->id ? 'selected' : '' }}>
                                            {{ $template->subject }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('email_template_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="sms_template_id" class="form-label">SMS content template</label>
                                <select class="form-select select2 @error('sms_template_id') is-invalid @enderror" 
                                        id="sms_template_id" 
                                        name="sms_template_id">
                                    <option value="">Select SMS Template</option>
                                    @foreach($sms_templates ?? [] as $template)
                                        <option value="{{ $template->id }}" 
                                                {{ old('sms_template_id', $isEdit ? $data->sms_template_id : '') == $template->id ? 'selected' : '' }}>
                                            {{ $template->title }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('sms_template_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <div class="form-check form-switch">
                                    <input type="hidden" name="is_active" value="0">
                                    <input class="form-check-input" 
                                           type="checkbox" 
                                           id="is_active" 
                                           name="is_active" 
                                           value="1"
                                           {{ old('is_active', $isEdit ? $data->is_active : true) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="is_active">
                                        Enable Schedule Email
                                    </label>
                                </div>
                                <div class="form-text">Toggle to enable or disable this schedule email</div>
                                @error('is_active')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div> -->

                    <div class="text-end mt-3">
                        <a href="{{ route('schedule-emails.index') }}" class="btn btn-dark waves-effect me-2">Cancel</a>
                        <button type="submit" class="btn btn-primary">{{ $isEdit ? 'Update' : 'Add' }} Schedule Email</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@push('page_script')
<meta name="csrf-token" content="{{ csrf_token() }}">
<script src="{{ asset('assets/libs/parsleyjs/parsley.min.js') }}"></script>
<script src="{{ asset('assets/js/pages/form-validation.init.js') }}"></script>
<script>
$(document).ready(function() {
    // Initialize Select2 for all select elements
    $('.select2').select2({
        placeholder: function() {
            return $(this).data('placeholder') || 'Select an option';
        },
        allowClear: true,
        width: '100%'
    });

    // Form validation - following SMS template pattern
    if (!$('#schedule-email-form').data('parsley')) {
        $('#schedule-email-form').parsley({
            errorClass: 'is-invalid',
            successClass: 'is-valid',
            errorsWrapper: '<div class="invalid-feedback"></div>',
            errorTemplate: '<span></span>'
        });
    }

    // Handle trigger selection to show/hide service field
    $('#trigger_id').change(function() {
        const selectedOption = $(this).find(':selected');
        const needService = selectedOption.data('need-service');
        
        if (needService === true || needService === 'true') {
            $('#service-field').show();
            loadServices(); // Load services when field is shown
        } else {
            $('#service-field').hide();
            $('#service_id').val('').trigger('change');
        }
    });

    // Handle tenant selection to load services, email templates, and SMS templates
    $('#tenant_id').change(function() {
        loadServices();
        loadEmailTemplates();
        loadSmsTemplates();
    });

    // Function to load services based on tenant
    function loadServices() {
        const tenantId = $('#tenant_id').val() || '{{ $tenant_id }}';
        
        if (!tenantId) {
            $('#service_id').html('<option value="">Select Service</option>');
            return;
        }

        // Show loading state
        $('#service_id').html('<option value="">Loading services...</option>');
        
        $.ajax({
            url: '{{ route("services.get-by-tenant") }}',
            method: 'GET',
            data: { tenant_id: tenantId },
            success: function(response) {
                let options = '<option value="">Select Service</option>';
                
                if (response.status && response.data && response.data.length > 0) {
                    response.data.forEach(function(service) {
                        const selected = '{{ old("service_id", $isEdit ? $data->service_id : "") }}' == service.id ? 'selected' : '';
                        options += `<option value="${service.id}" ${selected}>${service.name}</option>`;
                    });
                }
                
                $('#service_id').html(options);
            },
            error: function() {
                $('#service_id').html('<option value="">Error loading services</option>');
                console.error('Failed to load services');
            }
        });
    }

    // Function to load email templates based on tenant
    function loadEmailTemplates() {
        const tenantId = $('#tenant_id').val() || '{{ $tenant_id }}';
        
        if (!tenantId) {
            $('#email_template_id').html('<option value="">No Option</option>');
            return;
        }

        // Show loading state
        $('#email_template_id').html('<option value="">Loading email templates...</option>');
        
        $.ajax({
            url: '{{ route("schedule-emails.email-templates-by-tenant") }}',
            method: 'GET',
            data: { tenant_id: tenantId },
            success: function(response) {
                let options = '<option value="">No Option</option>';
                
                if (response.status === 200 && response.data && response.data.length > 0) {
                    response.data.forEach(function(template) {
                        const selected = '{{ old("email_template_id", $isEdit ? $data->email_template_id : "") }}' == template.id ? 'selected' : '';
                        options += `<option value="${template.id}" ${selected}>${template.subject}</option>`;
                    });
                }
                
                $('#email_template_id').html(options);
            },
            error: function() {
                $('#email_template_id').html('<option value="">Error loading email templates</option>');
                console.error('Failed to load email templates');
            }
        });
    }

    // Function to load SMS templates based on tenant
    function loadSmsTemplates() {
        const tenantId = $('#tenant_id').val() || '{{ $tenant_id }}';
        
        if (!tenantId) {
            $('#sms_template_id').html('<option value="">Select SMS Template</option>');
            return;
        }

        // Show loading state
        $('#sms_template_id').html('<option value="">Loading SMS templates...</option>');
        
        $.ajax({
            url: '{{ route("schedule-emails.sms-templates-by-tenant") }}',
            method: 'GET',
            data: { tenant_id: tenantId },
            success: function(response) {
                let options = '<option value="">Select SMS Template</option>';
                
                if (response.status === 200 && response.data && response.data.length > 0) {
                    response.data.forEach(function(template) {
                        const selected = '{{ old("sms_template_id", $isEdit ? $data->sms_template_id : "") }}' == template.id ? 'selected' : '';
                        options += `<option value="${template.id}" ${selected}>${template.title}</option>`;
                    });
                }
                
                $('#sms_template_id').html(options);
            },
            error: function() {
                $('#sms_template_id').html('<option value="">Error loading SMS templates</option>');
                console.error('Failed to load SMS templates');
            }
        });
    }

    // Trigger change event on page load if editing
    @if($isEdit && $data->trigger_id)
        $('#trigger_id').trigger('change');
    @endif

    // Load services, email templates, and SMS templates on page load if tenant is selected
    @if($tenant_id || ($isEdit && $data->tenant_id))
        loadServices();
        loadEmailTemplates();
        loadSmsTemplates();
    @endif
});
</script>
@endpush