@extends('layouts.main')
@section('title', 'Mobile Fields Master')
@section('container')

    <style>
        .new-card-header {
            padding: 7px 10pxpx !important;
        }

        .card-header.align-items-center.d-flex {
            padding: 8px 10px;
        }

        .dashboard_bar {
            color: #fff !important;
        }

        .col-xxl-12.col-md-12 {
            margin-top: 5px;
        }

        .col-xl-3.col-lg-3 {
            margin-top: 12px;
        }

        form#addCompany {
            margin-bottom: 0;
        }

        /* Wrapper for horizontal scroll on medium screens */
        .tabl-wrapper {
            width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        /* Base table */
        .tabl {
            width: 100%;
            border-collapse: collapse;
            background: #fff;
            font-size: 14px;
        }

        .tabl th,
        .tabl td {
            padding: 10px 12px;
            border: 1px solid #e5e7eb;
            /* light gray */
            text-align: left;
            vertical-align: top;
        }

        .tabl thead th {
            background: #f3f4f6;
            font-weight: 600;
            position: sticky;
            /* sticky header when wrapped */
            top: 0;
            z-index: 1;
        }

        /* Zebra + hover */
        .tabl tbody tr:nth-child(even) {
            background: #fafafa;
        }

        .tabl tbody tr:hover {
            background: #f6f8ff;
        }

        /* Utilities */
        .tabl td.nowrap {
            white-space: nowrap;
        }

        .tabl td.truncate {
            max-width: 220px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Mobile: convert to cards */
        @media (max-width: 640px) {
            .tabl {
                border: 0;
            }

            .tabl thead {
                display: none;
            }

            .tabl,
            .tabl tbody,
            .tabl tr,
            .tabl td {
                display: block;
                width: 100%;
            }

            .tabl tr {
                margin: 0 0 12px;
                border: 1px solid #e5e7eb;
                border-radius: 12px;
                overflow: hidden;
                background: #fff;
                box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
            }

            .tabl td {
                border: 0;
                border-bottom: 1px solid #f1f5f9;
                display: flex;
                gap: 8px;
                justify-content: space-between;
                padding: 10px 12px;
            }

            .tabl td:last-child {
                border-bottom: 0;
            }

            .tabl td::before {
                content: attr(data-label);
                font-weight: 600;
                color: #374151;
                flex: 0 0 45%;
                max-width: 55%;
            }

            .tabl td>* {
                flex: 1 1 auto;
                text-align: right;
            }
        }

        .btn-sm {
            padding: 2px 6px;
            font-size: 12px;
        }

        .select2-container .select2-selection--single {
            height: 38px;
        }

        .card-body {
            transition: all 0.4s ease-in-out;
        }
    </style>
    <div class="row">
        <div class="col-md-12">
            <div class="bootstrap-badge">
                <a href="https://www.youtube.com/watch?v=Hgg7M3kSqyE" title="_blank"
                    class="badge badge-circle badge-primary" style="float: right;"><i class="fa fa-question"></i></a>
            </div>
        </div>
    </div>
    <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">Fields Master</h4>
                    <a class="btn btn-primary p-2" style="float: right;"><i class="fa fa-upload"></i> Bulk Upload</a>
                </div>
                <div class="card-body">
                    <!-- ******** Row ************* -->
                    <div class="row">
                        <div class="col-md-9">
                            <label>Name:</label>
                            @if($id != 0)
                                <input type="text" class="form-control" id="name" name="name"
                                    placeholder="Enter templete Name here...." readonly value="{{ $templete->name }}"
                                    style="width:100%;background:#ddd;" required>

                                <input type="hidden" class="form-control" id="id" name="id"
                                    placeholder="Enter templete Name here...." readonly value="{{ $templete->id }}"
                                    style="width:100%;background:#ddd;" required>
                            @else
                                <input type="text" class="form-control" id="name" name="name"
                                    placeholder="Enter templete Name here...." style="width:100%;" required>
                            @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>

                    <!-- ********* Qu Formate List ********* -->
                    <div id="questions" class="mt-4 space-y-4 row">
                    </div>
                    <!-- ********* Qu Formate List ********* -->
                    <button type="submit" id="submit" class="btn btn-primary mt-4">Save Template</button>
                </div>
                <!-- ******** Row ************* -->
            </div>
    </div>
    </form>
    </div>

    <!-- Load scripts in correct order -->
    <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/addactivityqu.js') }}"></script> -->
    <script nonce="{{ $cspNonce }}" src="{{ asset('js/mobile_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 }}" src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
    
<!-- Floating FAB -->
<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>

<style>
    .fab-add-question {
        position: fixed;
        bottom: 24px;
        right: 24px;
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: #f39c12;
        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 {
        background: #e67e22;
        transform: translateY(-4px) scale(1.06);
        box-shadow: 0 12px 24px rgba(0,0,0,0.32);
    }
    .fab-add-question:active {
        transform: scale(0.92);
    }
    @media (max-width: 576px) {
        .fab-add-question { width:56px; height:56px; bottom:16px; right:16px; }
    }
</style>
<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