@extends('layouts.main')
@section('title', 'Add INF Template')
@section('container')

<style>
    .new-card-header { padding: 7px 10px !important; }
    .card-header.align-items-center.d-flex { padding: 8px 10px; }
    .tabl-wrapper { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .btn-sm { padding: 2px 6px; font-size: 12px; }
    .card-body { transition: all 0.4s ease-in-out; }
    .fab-add-question {
        position: fixed; bottom: 24px; right: 24px;
        width: 64px; height: 64px; border-radius: 50%;
        background: var(--secondary); color: white; border: none;
        box-shadow: 0 6px 16px rgba(0,0,0,0.28);
        cursor: pointer; display: flex; align-items: center; justify-content: center;
        z-index: 999; transition: all 0.25s ease;
    }
    .fab-add-question:hover { opacity: .88; transform: translateY(-4px) scale(1.06); }
    .fab-add-question:active { transform: scale(0.92); }
    @media (max-width: 576px) {
        .fab-add-question { width:56px; height:56px; bottom:16px; right:16px; }
    }
</style>

<div class="col-md-12 mt-2">
    <form id="addnewrow" method="POST">
        @csrf
        <div class="card" style="height: max-content;">
            <div class="card-header new-card-header" style="background:var(--secondary); padding:7px 10px!important;">
                <h4 class="card-title" data-heading-tag="H4">Add INF Template</h4>
                <a href="{{ route('inftempletemaster') }}" class="btn btn-secondary btn-sm">
                    <i class="fa fa-arrow-left"></i> Back
                </a>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-9">
                        <label>Template Name:</label>
                        <input type="text" class="form-control" id="name" name="name"
                            placeholder="Enter template name here...."
                            style="width:100%;"
                            value="{{ $templete->name ?? '' }}"
                            {{ $id != 0 ? 'readonly style=background:#ddd;' : '' }}
                            required>
                        @if($id != 0)
                            <input type="hidden" name="id" value="{{ $templete->id }}">
                        @endif
                    </div>
                    <div class="col-md-3">
                        <button type="button" class="btn btn-primary p-2 mt-4" id="addQuestion">
                            + Add Question
                        </button>
                    </div>
                </div>

                <div id="questions" class="mt-4 space-y-4 row"></div>

                <button type="button" id="submit" class="btn btn-primary mt-4">Save Template</button>
            </div>
        </div>
    </form>
</div>

<button type="button" id="fabAdd" class="fab-add-question" title="Add New Question">
    <svg viewBox="0 0 24 24" width="28" height="28" stroke="currentColor" stroke-width="3" fill="none">
        <line x1="12" y1="5" x2="12" y2="19"></line>
        <line x1="5" y1="12" x2="19" y2="12"></line>
    </svg>
</button>

<script nonce="{{ $cspNonce }}" src="{{ asset('public/js/jquery-3.6.0.min.js') }}"></script>
<script nonce="{{ $cspNonce }}" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script nonce="{{ $cspNonce }}" src="{{ asset('js/inf_template_create.js') }}"></script>
<script nonce="{{ $cspNonce }}" src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script nonce="{{ $cspNonce }}" src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script nonce="{{ $cspNonce }}">
    document.getElementById('fabAdd').addEventListener('click', function () {
        document.getElementById('addQuestion').click();
        this.style.transform = 'scale(0.88)';
        setTimeout(() => this.style.transform = 'scale(1)', 140);
    });
</script>

@if($id != 0)
    <script nonce="{{ $cspNonce }}">
        loadtempletedata({{ $id }});
    </script>
@endif

@endsection