@extends('layouts.app', ['title' => __('POS Templates')])

@section('admin_title')
{{ __('POS Templates') }}
@endsection

@section('content')

<div class="header bg-gradient-primary pb-8 pt-5 pt-md-5"></div>
<div class="container-fluid mt--7">

    <div class="row">
        <div class="col-xl-12">
            <div class="card shadow">

                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="mb-0">{{ __('POS Templates') }}</h3>
                    <button type="button" class="btn btn-success" onclick="openNamePopup()">Save</button>
                </div>

                <div class="card-body">
                    <form method="POST" action="/pos-template.save" id="floorplanForm">
                        @csrf
                        <input type="hidden" name="template_name" id="template_name">
                        <input type="hidden" name="selected_template" id="selected_template">

                        <div class="row">
                            @foreach ($templates as $template)
<div class="col-md-6 text-center mb-4 template-box" data-value="{{ $template->id }}">
    <div class="form-check">
        <input class="form-check-input" type="radio" name="selected_template_radio" value="{{ $template->id }}" id="template{{ $template->id }}"
            {{ auth()->user()->pos_template_id == $template->id ? 'checked' : '' }}>
        <label class="form-check-label" for="template{{ $template->id }}">
            @if(auth()->user()->pos_template_id == $template->id && auth()->user()->pos_template_name)
                {{ auth()->user()->pos_template_name }}
            @else
                {{ $template->name }}
            @endif
        </label>
    </div>
    <img src="{{ asset('images/'.$template->image) }}" class="img-fluid rounded mt-2" alt="{{ $template->name }}">
</div>

                            @endforeach
                        </div>
                    </form>
                </div>

                <!-- Modal -->
                <div class="modal fade" id="templateModal" tabindex="-1" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Enter POS Template Name</h5>
                                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <input type="text" id="templateNameInput" class="form-control" placeholder="POS Template Name">
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                <button type="button" class="btn btn-primary" id="saveTemplateBtn">Save</button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
     @include('layouts.footers.auth')
</div>

<!-- Bootstrap 5 JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

<script>
    // Template box click highlighting
    document.querySelectorAll('.template-box').forEach(box => {
        box.addEventListener('click', function() {

            // Remove highlight from all
            document.querySelectorAll('.template-box').forEach(b => {
                b.style.border = "none";
            });

            // Highlight selected
            this.style.border = "3px solid #4A90E2";
            this.style.borderRadius = "10px";

            // Check the radio button inside the clicked box
            let radio = this.querySelector('input[type="radio"]');
            radio.checked = true;

            // Update hidden input for form submission
            document.getElementById('selected_template').value = radio.value;
        });
    });

    // Open modal
    var templateModalEl = document.getElementById('templateModal');
    var templateModal = new bootstrap.Modal(templateModalEl);

    function openNamePopup() {
        // Ensure a template is selected
        if (!document.getElementById('selected_template').value) {
            alert('Please select a template first');
            return;
        }

        templateModal.show();
    }

    // Save button in modal
    document.getElementById('saveTemplateBtn').addEventListener('click', function() {
        let templateName = document.getElementById('templateNameInput').value.trim();

        if (templateName === '') {
            alert('Please enter a template name');
            return;
        }

        // Set hidden input
        document.getElementById('template_name').value = templateName;

        // Submit form
        document.getElementById('floorplanForm').submit();

        // Hide modal
        templateModal.hide();
    });
</script>

@endsection