@extends('contentNavbarLayout')

@section('title', 'Add New Record')

@section('content')
<div class="container">
    <h3 class="card-title text-uppercase mb-4">ADD NEW RECORD</h3>

    {{--  Success Message --}}
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="mdi mdi-check-circle-outline me-1"></i>
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    {{--  Global Error List --}}
    @if ($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="mdi mdi-alert-circle-outline me-1"></i>
            <strong>Whoops!</strong> There were some problems with your input:
            <ul class="mb-0 mt-1 ps-3">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    {{--  Record Creation Form --}}
    <form method="POST" action="" id="recordForm" enctype="multipart/form-data">
        @csrf

        {{--  Record Type Dropdown --}}
        <div class="mb-4">
            <label class="form-label">Record Type</label>
            <select id="recordTypeSelect" name="record_type_id" class="form-select" required>
                <option value="" selected disabled>Select Record Type</option>
                @foreach($recordTypes as $type)
                    <option value="{{ $type->id }}">{{ strtoupper($type->name) }}</option>
                @endforeach
            </select>
        </div>

        {{-- Default Fields --}}
        <div class="mb-3">
            <label class="form-label">Document Name</label>
            <input type="text" name="title" class="form-control" placeholder="Enter document title" required>
        </div>

        <div class="mb-4">
            <label class="form-label">Description</label>
            <textarea name="description" class="form-control" required></textarea>
        </div>

        <div class="mb-4">
            <label class="form-label">File</label>
            <input type="file" name="file_path" class="form-control">
        </div>

        {{-- Container for dynamic properties (AJAX will inject fields here) --}}
        <div id="dynamicFields"></div>

        {{-- Buttons --}}
        <div class="mt-3 d-flex gap-2">
            <a href="{{ route('records.view.index') }}" class="btn btn-secondary">
                <i class="mdi mdi-arrow-left"></i> Back
            </a>

            <button type="submit" class="btn btn-primary">
                <i class="mdi mdi-content-save"></i> Submit
            </button>
        </div>
    </form>
</div>

{{--  Script to dynamically load fields when selecting record type --}}
<script>
document.addEventListener('DOMContentLoaded', function () {
    const select = document.getElementById('recordTypeSelect');
    const form = document.getElementById('recordForm');
    const dynamic = document.getElementById('dynamicFields');

    select.addEventListener('change', function () {
        const typeId = this.value;
        if (!typeId) return;

        // Change form action dynamically
        form.action = `/records/${typeId}`;

        // Clear dynamic fields
        dynamic.innerHTML = '';

        // Find selected record type from PHP array
        const recordTypes = @json($recordTypes);
        const selectedType = recordTypes.find(rt => rt.id == typeId);

        if (selectedType && selectedType.properties.length > 0) {
            selectedType.properties.forEach(p => {
                let field = '';
                // Check if property is required
                const isRequired = p.pivot && p.pivot.is_required;
                const requiredAttr = isRequired ? 'required' : '';
                const requiredLabel = isRequired ? '<span class="text-danger">*</span>' : '';

                switch (p.data_type) {
                    case 'string':
                        field = `<input type="text" name="${p.name.toLowerCase().replace(/\s+/g, '_')}" class="form-control" ${requiredAttr}>`;
                        break;
                    case 'text':
                        field = `<textarea name="${p.name.toLowerCase().replace(/\s+/g, '_')}" class="form-control" ${requiredAttr}></textarea>`;
                        break;
                    case 'integer':
                    case 'quantity':
                        field = `<input type="number" name="${p.name.toLowerCase().replace(/\s+/g, '_')}" class="form-control" ${requiredAttr}>`;
                        break;
                    case 'decimal':
                    case 'float':
                    case 'double':
                        field = `<input type="number" step="0.01" name="${p.name.toLowerCase().replace(/\s+/g, '_')}" class="form-control" ${requiredAttr}>`;
                        break;
                    case 'boolean':
                        field = `<select name="${p.name.toLowerCase().replace(/\s+/g, '_')}" class="form-select" ${requiredAttr}>
                                    <option value="">Select...</option>
                                    <option value="1">Yes</option>
                                    <option value="0">No</option>
                                </select>`;
                        break;
                    case 'date':
                        field = `<input type="date" name="${p.name.toLowerCase().replace(/\s+/g, '_')}" class="form-control" ${requiredAttr}>`;
                        break;
                    case 'time':
                        field = `<input type="time" name="${p.name.toLowerCase().replace(/\s+/g, '_')}" class="form-control" ${requiredAttr}>`;
                        break;
                    case 'datetime':
                        field = `<input type="datetime-local" name="${p.name.toLowerCase().replace(/\s+/g, '_')}" class="form-control" ${requiredAttr}>`;
                        break;
                    case 'file':
                        field = `<input type="file" name="${p.name.toLowerCase().replace(/\s+/g, '_')}_path" class="form-control" ${requiredAttr}>`;
                        break;
                    case 'json':
                        field = `<textarea name="${p.name.toLowerCase().replace(/\s+/g, '_')}" class="form-control" placeholder="Enter JSON" ${requiredAttr}></textarea>`;
                        break;
                    default:
                        field = `<input type="text" name="${p.name.toLowerCase().replace(/\s+/g, '_')}" class="form-control" ${requiredAttr}>`;
                }

                dynamic.innerHTML += `
                    <div class="mb-4">
                        <label class="form-label">${p.name.charAt(0).toUpperCase() + p.name.slice(1)} ${requiredLabel}</label>
                        ${field}
                    </div>
                `;
            });
        }
    });
});
</script>
@endsection