@extends('admin.layouts.layout')

@section('title', 'Create Report Template')

@section('content')
<div class="">
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <h4 class="page-title">Create New Report Template</h4>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <!-- Form -->
                    <form id="template-form" action="{{ $form_action }}" method="POST">
                        @csrf
                        @php($isEdit = false)
                        @if($method == 'PUT')
                        @php($isEdit = true)
                        @method('PUT')
                        @endif

                        <div class="row">
                            <div class="col-lg-6">
                                <!-- Basic Information -->
                                <div class="form-section">

                                    <!-- Template Name -->
                                    <div class="mb-3">
                                        <label for="name" class="form-label">Template Name <span class="text-danger">*</span></label>
                                        <input type="text"
                                            class="form-control @error('name') is-invalid @enderror"
                                            id="name"
                                            name="name"
                                            value="{{ old('name') }}"
                                            required
                                            placeholder="Enter template name">
                                        @error('name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <!-- Tenant Selection (Super Admin Only) -->
                                    <input type="hidden" name="tenant_id" value="{{ session('tenant_id') }}">
                                </div>
                            </div>

                            <div class="col-lg-6">
                                <div class="mb-3">
                                    <label for="services" class="form-label">Services <span class="text-danger">*</span></label>
                                    <select class="form-select @error('services') is-invalid @enderror js-select2"
                                        id="services"
                                        name="services[]"
                                        multiple
                                        required
                                        size="10">
                                        @foreach($services as $id => $name)
                                        <option value="{{ $id }}"
                                            {{ (is_array(old('services')) && in_array($id, old('services'))) ? 'selected' : '' }}>
                                            {{ $name }}
                                        </option>
                                        @endforeach
                                    </select>
                                    @error('services')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    @error('services.*')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-lg-6" style="display: none;">

                                <!-- Template Configuration -->
                                <div class="form-section">

                                    <!-- Template Type -->
                                    <div class="mb-3">
                                        <label for="template_type" class="form-label">Template Type <span class="text-danger">*</span></label>
                                        <select class="form-select"
                                            name="template_type"
                                            required>
                                            <option value="">Select Type</option>
                                            <option value="general" {{ old('template_type') == 'general' ? 'selected' : '' }} selected>General</option>
                                            <option value="texas" {{ old('template_type') == 'texas' ? 'selected' : '' }}>Texas</option>
                                        </select>
                                        
                                    </div>

                                    <!-- Structure Type -->
                                    <div class="mb-3">
                                        <label for="structure_type" class="form-label">Structure Type <span class="text-danger">*</span></label>
                                        <select class="form-select"
                                            name="structure_type"
                                            required>
                                            <option value="">Select Structure</option>
                                            <option value="section_by_section" {{ old('structure_type') == 'section_by_section' ? 'selected' : '' }} selected>Section by Section</option>
                                            <option value="room_by_room" {{ old('structure_type') == 'room_by_room' ? 'selected' : '' }}>Room by Room</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-4">
                                <!-- Associated Services -->
                                <div class="form-section">


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

@section('js')
<script>
    $(document).ready(function() {
        // Initialize form
        initTemplateForm();
    });

    function initTemplateForm() {
        // Form submission handler
        $('#template-form').on('submit', function(e) {
            e.preventDefault();

            // Disable submit button and show loading
            const $saveBtn = $('button[type="submit"]');
            const originalText = $saveBtn.html();
            $saveBtn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Saving...');

            // Submit form via AJAX
            const formData = new FormData(this);

            $.ajax({
                url: $(this).attr('action'),
                type: $(this).attr('method'),
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    if (response.status) {
                        showNotification('success', response.message);

                        // Redirect to index page after short delay
                        setTimeout(function() {
                            window.location.href = '{{ route("report-templates.master-templates.index") }}';
                        }, 1500);
                    } else {
                        showNotification('error', response.message || 'Error saving template');
                        $saveBtn.prop('disabled', false).html(originalText);
                    }
                },
                error: function(xhr) {
                    console.error('Save error:', xhr);

                    if (xhr.status === 422) {
                        // Validation errors
                        const errors = xhr.responseJSON.errors;
                        displayValidationErrors(errors);
                        showNotification('error', xhr.responseJSON.message || 'Please fix the validation errors');
                    } else {
                        showNotification('error', 'Error saving template. Please try again.');
                    }

                    $saveBtn.prop('disabled', false).html(originalText);
                }
            });
        });
    }

    function displayValidationErrors(errors) {
        // Clear previous errors
        $('.is-invalid').removeClass('is-invalid');
        $('.invalid-feedback').remove();

        // Display new errors
        Object.keys(errors).forEach(function(field) {
            const $field = $(`[name="${field}"], [name="${field}[]"]`);
            const errorMessage = errors[field][0];

            $field.addClass('is-invalid');
            $field.after(`<div class="invalid-feedback">${errorMessage}</div>`);
        });
    }

    function showNotification(type, message) {
        if (typeof toastr !== 'undefined') {
            toastr[type](message);
        } else if (typeof Swal !== 'undefined') {
            Swal.fire({
                icon: type === 'success' ? 'success' : 'error',
                title: type === 'success' ? 'Success' : 'Error',
                text: message,
                timer: 3000,
                showConfirmButton: false
            });
        } else {
            alert(message);
        }
    }
</script>
@endsection