@extends('layouts.app')
@section('title', 'Create Template')

@section('content')
    <div class="fixed-action-bar d-flex align-items-center justify-content-between">
        <div class="fixed-nav-title">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0 p-0 bg-transparent" style="font-size: 0.75rem;">
                    <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('horeca.workflow-templates.index') }}">Templates</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Create</li>
                </ol>
            </nav>
            <div class="fw-semibold mt-1">Create Workflow Group Template</div>
        </div>
        <div class="d-flex align-items-center">
            <button type="button" id="submitTemplateForm" class="btn p-0">
                <i class="fa-regular fa-save fixed-nav-btn fixed-nav-btn-active rounded-5 p-1 d-inline-flex align-items-center justify-content-center mx-1"
                    data-toggle="tooltip" title="Save Template"></i>
            </button>
            <a href="{{ route('horeca.workflow-templates.index') }}">
                <i class="fa-solid fa-xmark fixed-nav-btn rounded-5 p-1 d-inline-flex align-items-center justify-content-center ms-1"
                    data-toggle="tooltip" title="Cancel"></i>
            </a>
        </div>
    </div>

    <form id="templateForm" action="{{ route('horeca.workflow-templates.store') }}" method="POST">
        @csrf

        <div class="row mt-4">
            <!-- Left Column: Template Details -->
            <div class="col-md-5">
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-white border-0 py-3 ps-3">
                        <h6 class="mb-0 fw-bold d-flex align-items-center">
                            Basic Information
                        </h6>
                    </div>
                    <div class="card-body pt-2 px-4 pb-4">
                        <div class="mb-4 pt-2">
                            <label for="name" class="form-label small text-muted fw-bold mb-1">Template Name <span
                                    class="text-danger">*</span></label>
                            <input type="text" class="form-control form-control-flat @error('name') is-invalid @enderror"
                                id="name" name="name" value="{{ old('name') }}" required
                                placeholder="e.g., Standard Outlet Audit" maxlength="255">
                            @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <div class="mb-4">
                            <label for="description" class="form-label small text-muted fw-bold mb-1">Description</label>
                            <textarea class="form-control form-control-flat" id="description" name="description" rows="3"
                                placeholder="Brief explanation of this template..." maxlength="500"></textarea>
                            <div class="text-end x-small text-muted mt-1"><span id="charCount">0</span>/500</div>
                        </div>

                        <div class="row mb-4">
                            <div class="col-md-7">
                                <label for="icon" class="form-label small text-muted fw-bold mb-1">Icon</label>
                                <div class="input-group">
                                    <input type="text" class="form-control form-control-flat" id="icon" name="icon"
                                        value="fa-solid fa-layer-group" placeholder="Emoji" readonly>
                                    <button class="btn btn-outline-secondary" type="button" id="emojiPickerBtn"
                                        style="border-radius: 0 8px 8px 0; border: 1px solid #e0e6ed; background: #fcfdfe;">
                                        <i class="fa-regular fa-face-smile"></i>
                                    </button>
                                </div>
                                <small class="text-muted x-small mt-1 d-block">Click the smile to pick an emoji</small>
                            </div>
                            <div class="col-md-5">
                                <label for="color" class="form-label small text-muted fw-bold mb-1">Theme Color</label>
                                <div class="color-picker-container rounded border d-flex align-items-center"
                                    style="height: 42px; padding: 0 10px; background: #fcfdfe;">
                                    <input type="color" class="form-control form-control-color border-0 p-0" id="color"
                                        name="color" value="#4e73df" title="Choose template color"
                                        style="width: 100%; height: 24px;">
                                </div>
                            </div>
                        </div>

                        <div class="mb-4">
                            <label class="form-label small text-muted fw-bold mb-2 d-block">Status</label>
                            <div class="d-flex align-items-center" style="height: 38px;">
                                <div class="custom-control custom-switch me-2"
                                    style="padding-left: 2.75rem; line-height: 24px;">
                                    <input type="checkbox" class="custom-control-input" id="statusSwitch" checked>
                                    <label class="custom-control-label" for="statusSwitch" style="cursor: pointer;"></label>
                                    <input type="hidden" name="status" id="statusHidden" value="active">
                                </div>
                                <span
                                    class="status-label badge badge-success-soft badge-same-width fw-bold py-2">Active</span>
                            </div>
                        </div>

                        <div class="border-top my-4"></div>

                        <!-- Real-time Preview -->
                        <div class="preview-section">
                            <label class="form-label x-small text-muted fw-bold text-uppercase mb-3 letter-spacing-1">Live
                                Preview</label>
                            <div class="preview-card border rounded p-3 d-flex align-items-center shadow-sm bg-white"
                                style="border-left: 4px solid #4e73df !important;">
                                <div class="icon-container rounded-circle d-flex align-items-center justify-content-center me-3"
                                    style="width: 48px; height: 48px; background-color: rgba(78, 115, 223, 1); color: #fff;">
                                    <div id="previewIcon">
                                        <i class="fa-solid fa-layer-group font-20"></i>
                                    </div>
                                </div>
                                <div class="flex-grow-1">
                                    <h6 class="mb-1 fw-bold text-dark" id="previewName">Template Name</h6>
                                    <div class="d-flex align-items-center x-small text-muted fw-semibold">
                                        <span class="me-3"><i class="fa-solid fa-diagram-project me-1"></i> <span
                                                id="previewWorkflowCount">0</span> Workflows</span>
                                        <span><i class="fa-solid fa-shop me-1"></i> 0 Outlets</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right Column: Workflows -->
            <div class="col-md-7">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-header bg-white border-0 py-4 ps-4 d-flex justify-content-between align-items-center">
                        <h6 class="mb-0 fw-bold d-flex align-items-center text-primary-dark">
                            Workflows in Template
                        </h6>
                        <button type="button" class="btn btn-sm btn-orange-gradient px-4 rounded-pill fw-bold"
                            data-toggle="modal" data-target="#addWorkflowModal">
                            <i class="fa-solid fa-plus me-1"></i> Add Workflow
                        </button>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover align-middle mb-0" id="workflowsTable">
                                <thead class="bg-light-blue py-2">
                                    <tr class="text-uppercase x-small fw-bold text-muted letter-spacing-1">
                                        <th width="40" class="ps-3"></th>
                                        <th width="80">Order</th>
                                        <th>Workflow Name</th>
                                        <th width="120" class="text-center">Mandatory</th>
                                        <th width="80" class="text-center">Action</th>
                                    </tr>
                                </thead>
                                <tbody id="addedWorkflowsBody" class="sortable">
                                    <tr id="emptyStateRow">
                                        <td colspan="5" class="py-5 text-center">
                                            <div class="mb-3 opacity-25">
                                                <i class="fa-solid fa-folder-open display-3"></i>
                                            </div>
                                            <p class="text-muted fw-semibold">No workflows added yet</p>
                                            <button type="button"
                                                class="btn btn-sm btn-outline-primary rounded-pill px-4 mt-2 mb-4"
                                                data-toggle="modal" data-target="#addWorkflowModal">
                                                Add Your First Workflow
                                            </button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <!-- Add Workflow Modal -->
    <div class="modal fade" id="addWorkflowModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addWorkflowModalLabel">Add Workflow to Template</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body p-4">
                    <p class="text-info-light mb-4 small fw-semibold">Select a workflow and configure its priority within
                        this template.</p>

                    <div class="mb-4">
                        <label class="form-label small fw-bold text-muted mb-1">Select Workflow</label>
                        <select id="modalWorkflowSelect" class="form-control select2 custom-select-ui">
                            <option value="">Choose a workflow...</option>
                            @foreach($workflows as $workflow)
                                @php
                                    $categoryLabel = [
                                        'impulse' => 'Impulse',
                                        'cooler' => 'Cooler',
                                        'branding' => 'Branding',
                                        'pouring_material' => 'Pouring Material'
                                    ][$workflow->category] ?? ucfirst($workflow->category);
                                @endphp
                                <option value="{{ $workflow->id }}" data-name="{{ $workflow->name }}"
                                    data-icon="{{ $workflow->icon }}" data-color="{{ $workflow->color }}"
                                    data-category="{{ $categoryLabel }}">
                                    {{ $workflow->name }} ({{ $categoryLabel }})
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label small fw-bold text-muted mb-1">Execution Order</label>
                            <input type="number" id="modalExecutionOrder" class="form-control form-control-flat"
                                placeholder="Position" min="1">
                            <small class="text-muted x-small">Leave blank for auto-increment</small>
                        </div>
                        <div class="col-md-6 d-flex align-items-end">
                            <div class="mb-2">
                                <div class="custom-control custom-switch">
                                    <input type="checkbox" class="custom-control-input" id="modalMandatory">
                                    <label class="custom-control-label small fw-bold" for="modalMandatory">Mandatory</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary px-4" data-dismiss="modal">Cancel</button>
                    <button type="button" id="confirmAddWorkflow" class="btn btn-primary px-4"
                        style="background-color: var(--Brand-1); border-color: var(--Brand-1);">Add to Template</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Row Template (Hidden) -->
    <template id="workflowRowTemplate">
        <tr class="workflow-row" data-id="{ID}">
            <td class="ps-3"><i class="fa-solid fa-grip-vertical text-muted cursor-move opacity-50"></i></td>
            <td>
                <input type="number" name="workflows[{INDEX}][execution_order]"
                    class="form-control form-control-sm execution-order-input rounded-3 bg-light border-0 fw-bold"
                    value="{ORDER}" min="1">
                <input type="hidden" name="workflows[{INDEX}][id]" value="{ID}">
            </td>
            <td>
                <div class="d-flex align-items-center">
                    <div class="rounded-circle d-flex align-items-center justify-content-center me-3"
                        style="width: 36px; height: 36px; background-color: {BG_COLOR}; color: {COLOR}; font-size: 1.2rem;">
                        {ICON_CONTENT}
                    </div>
                    <div>
                        <div class="fw-bold text-dark small">{NAME}</div>
                        <span class="badge bg-light text-muted x-small border-0 px-0">{CATEGORY}</span>
                    </div>
                </div>
            </td>
            <td class="text-center">
                <div class="custom-control custom-switch">
                    <input type="checkbox" class="custom-control-input" id="mandatory_{ID}"
                        name="workflows[{INDEX}][is_mandatory]" {MANDATORY_CHECKED}>
                    <label class="custom-control-label" for="mandatory_{ID}"></label>
                </div>
            </td>
            <td class="text-center">
                <button type="button" class="btn btn-sm btn-link text-danger p-0 hover-scale remove-workflow-btn">
                    <i class="fa-regular fa-trash-can font-16"></i>
                </button>
            </td>
        </tr>
    </template>
@endsection

@push('js')
    <script type="module" src="https://cdn.jsdelivr.net/npm/emoji-picker-element@1/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
    <script>
        $(document).ready(function () {
            $('.select2').select2({
                dropdownParent: $('#addWorkflowModal'),
                width: '100%'
            });

            // Sortable Implementation
            const el = document.getElementById('addedWorkflowsBody');
            const sortable = Sortable.create(el, {
                handle: '.cursor-move',
                animation: 200,
                ghostClass: 'bg-light-blue',
                onEnd: function () {
                    reOrderWorkflows();
                }
            });

            // Basic Info Listeners
            $('#name').on('input', function () {
                const val = $(this).val() || 'Template Name';
                $('#previewName').text(val);
            });

            $('#description').on('input', function () {
                $('#charCount').text($(this).val().length);
            });

            // Emoji Picker implementation using emoji-picker-element
            const pickerContainer = $('<div id="pickerContainer" style="display:none; position:absolute; z-index:9999; box-shadow: 0 5px 15px rgba(0,0,0,0.2); border-radius: 8px;"></div>');
            $('body').append(pickerContainer);
            pickerContainer.html('<emoji-picker></emoji-picker>');

            const $picker = pickerContainer.find('emoji-picker');

            $(document).on('click', '#emojiPickerBtn', function (e) {
                e.preventDefault();
                e.stopPropagation();

                const btnOffset = $(this).offset();
                const btnHeight = $(this).outerHeight();

                pickerContainer.css({
                    top: btnOffset.top + btnHeight + 5,
                    left: btnOffset.left - 250 // Adjust based on picker width
                }).toggle();
            });

            // Close picker when clicking outside
            $(document).on('click', function (e) {
                if (!$(e.target).closest('#emojiPickerBtn, #pickerContainer').length) {
                    pickerContainer.hide();
                }
            });

            $picker.on('emoji-click', event => {
                const emoji = event.detail.unicode;
                $('#icon').val(emoji).trigger('input');
                pickerContainer.hide();
            });

            $('#icon').on('input', function () {
                const val = $(this).val();
                if (val.startsWith('fa-')) {
                    $('#previewIcon').attr('class', val + ' font-20').html('');
                } else {
                    $('#previewIcon').html(val).attr('class', 'font-24');
                }
            });

            $('#color').on('input', function () {
                const val = $(this).val();
                $('.preview-card').css('border-left-color', val + ' !important');
                $('.icon-container').css({
                    'background-color': val,
                    'color': '#fff'
                });
            });

            // Status Toggle
            $('#statusSwitch').on('change', function () {
                const isActive = $(this).is(':checked');
                $('#statusHidden').val(isActive ? 'active' : 'inactive');
                $('.status-label').text(isActive ? 'Active' : 'Inactive')
                    .toggleClass('badge-success-soft', isActive)
                    .toggleClass('badge-danger-soft', !isActive);
            });

            // Add Workflow Logic
            $('#confirmAddWorkflow').on('click', function () {
                const $select = $('#modalWorkflowSelect');
                const workflowId = $select.val();

                if (!workflowId) {
                    Swal.fire('Error', 'Please select a workflow.', 'error');
                    return;
                }

                // Check if already added
                if ($(`#addedWorkflowsBody tr[data-id="${workflowId}"]`).length > 0) {
                    Swal.fire('Duplicate', 'This workflow is already added to the template.', 'warning');
                    return;
                }

                const data = $select.find(':selected').data();
                const isMandatory = $('#modalMandatory').is(':checked');
                const manualOrder = $('#modalExecutionOrder').val();
                let index = $('#addedWorkflowsBody .workflow-row').length;

                addWorkflowRow({
                    id: workflowId,
                    name: data.name,
                    icon: data.icon,
                    color: data.color,
                    category: data.category,
                    is_mandatory: isMandatory,
                    index: index,
                    order: manualOrder || (index + 1)
                });

                $('#addWorkflowModal').modal('hide');
                // Reset modal
                $select.val('').trigger('change');
                $('#modalMandatory').prop('checked', false);
                $('#modalExecutionOrder').val('');

                checkEmptyState();
                reOrderWorkflows();

                // If a manual order was specified, we might need a resort
                if (manualOrder) {
                    sortListByOrder();
                }
            });

            $(document).on('click', '.remove-workflow-btn', function () {
                $(this).closest('tr').remove();
                checkEmptyState();
                reOrderWorkflows();
            });

            function addWorkflowRow(wf) {
                $('#emptyStateRow').hide();

                let template = $('#workflowRowTemplate').html();
                const bgColor = wf.color;

                let iconContent = wf.icon.startsWith('fa-')
                    ? `<i class="${wf.icon} small"></i>`
                    : `<span>${wf.icon}</span>`;

                let html = template
                    .replace(/{INDEX}/g, wf.index)
                    .replace(/{ID}/g, wf.id)
                    .replace(/{ORDER}/g, wf.order)
                    .replace(/{NAME}/g, wf.name)
                    .replace(/{ICON_CONTENT}/g, iconContent)
                    .replace(/{COLOR}/g, '#fff')
                    .replace(/{BG_COLOR}/g, bgColor)
                    .replace(/{CATEGORY}/g, wf.category)
                    .replace(/{MANDATORY_CHECKED}/g, ''); // Handled via .prop() below

                const $row = $(html);
                if (wf.is_mandatory) {
                    $row.find('.custom-control-input').prop('checked', true);
                }

                $('#addedWorkflowsBody').append($row);
                updateWorkflowCount();
            }

            function checkEmptyState() {
                const hasRows = $('#addedWorkflowsBody .workflow-row').length > 0;
                $('#emptyStateRow').toggle(!hasRows);
            }

            function reOrderWorkflows() {
                $('#addedWorkflowsBody .workflow-row').each(function (index) {
                    $(this).find('.execution-order-input').val(index + 1);

                    // Update names for form submission
                    $(this).find('input').each(function () {
                        let name = $(this).attr('name');
                        if (name) {
                            $(this).attr('name', name.replace(/workflows\[\d+\]/, `workflows[${index}]`));
                        }
                    });
                });
                updateWorkflowCount();
            }

            function sortListByOrder() {
                const rows = $('#addedWorkflowsBody .workflow-row').get();
                rows.sort(function (a, b) {
                    const keyA = parseInt($(a).find('.execution-order-input').val());
                    const keyB = parseInt($(b).find('.execution-order-input').val());
                    return keyA - keyB;
                });
                $.each(rows, function (index, row) {
                    $('#addedWorkflowsBody').append(row);
                });
                reOrderWorkflows();
            }

            function updateWorkflowCount() {
                const count = $('#addedWorkflowsBody .workflow-row').length;
                $('#previewWorkflowCount').text(count);
            }

            // Form Submit
            $('#submitTemplateForm').on('click', function () {
                const form = document.getElementById('templateForm');

                if ($('#addedWorkflowsBody .workflow-row').length === 0) {
                    Swal.fire('Requirement', 'You must add at least one workflow to the template.', 'warning');
                    return;
                }

                if (form.checkValidity()) {
                    form.submit();
                } else {
                    form.reportValidity();
                }
            });
        });
    </script>
@endpush

@push('css')
    <style>
        .bg-light-blue {
            background-color: #f0f7ff !important;
        }

        .text-primary-dark {
            color: #2c3e50;
        }

        .text-info-light {
            color: #7f8c8d;
        }

        .card {
            margin-bottom: 2rem;
            border-radius: 12px;
        }

        .card-header {
            padding: 1.5rem 1.5rem 0.5rem 2rem !important;
        }

        .card-body {
            padding: 1.5rem 2rem 2rem 2rem !important;
        }

        .form-label {
            margin-bottom: 0.6rem;
        }

        .preview-card {
            padding: 1.5rem !important;
        }

        .form-control-flat {
            border: 1px solid #e0e6ed;
            border-radius: 8px;
            padding: 10px 15px;
            background: #fcfdfe;
            transition: all 0.2s ease;
        }

        .form-control-flat:focus {
            background: #fff;
            border-color: #3498db;
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
        }

        .input-group-flat .input-group-text {
            border: 1px solid #e0e6ed;
            border-radius: 8px 0 0 8px;
        }

        .input-group-flat .form-control {
            border-radius: 0 8px 8px 0;
        }

        .btn-orange-gradient {
            background: linear-gradient(135deg, #f39c12, #e67e22);
            color: white;
            border: none;
            box-shadow: 0 4px 12px rgba(230, 126, 34, 0.2);
            transition: all 0.3s ease;
        }

        .btn-orange-gradient:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 15px rgba(230, 126, 34, 0.3);
            color: white;
        }

        .btn-orange-rounded {
            background-color: #f39c12;
            color: white;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(243, 156, 18, 0.3);
            border: none;
            transition: 0.3s;
        }

        .btn-orange-rounded:hover {
            background-color: #e67e22;
            transform: translateY(-1px);
            box-shadow: 0 6px 10px rgba(230, 126, 34, 0.4);
            color: white;
        }

        .btn-cyan-rounded {
            background-color: #48c9b0;
            color: white;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(72, 201, 176, 0.3);
            border: none;
            transition: 0.3s;
        }

        .btn-cyan-rounded:hover {
            background-color: #1abc9c;
            transform: translateY(-1px);
            box-shadow: 0 6px 10px rgba(26, 188, 156, 0.4);
            color: white;
        }

        .modal-custom {
            border-radius: 12px;
            overflow: hidden;
        }

        .letter-spacing-1 {
            letter-spacing: 1px;
        }

        .font-16 {
            font-size: 16px;
        }

        .font-20 {
            font-size: 20px;
        }

        .cursor-move {
            cursor: grab;
        }

        .hover-scale:hover {
            transform: scale(1.15);
        }

        .execution-order-input {
            width: 55px;
        }

        /* Select2 Customization to match flat theme */
        .select2-container--default .select2-selection--single {
            border: 1px solid #e0e6ed !important;
            border-radius: 8px !important;
            height: 42px !important;
            background: #fcfdfe !important;
        }

        .badge-same-width {
            width: 90px;
            height: 28px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            border-radius: 50px;
        }

        .badge-success-soft {
            background-color: rgba(40, 167, 69, 0.1);
            color: #28a745;
            border: 1px solid rgba(40, 167, 69, 0.2);
        }

        .badge-danger-soft {
            background-color: rgba(220, 53, 69, 0.1);
            color: #dc3545;
            border: 1px solid rgba(220, 53, 69, 0.2);
        }

        .custom-control-label::before {
            width: 2.25rem;
            height: 1.25rem;
            border-radius: 50px !important;
            background-color: #dee2e6;
            border: none;
            top: 0.15rem;
        }

        .custom-control-label::after {
            width: calc(1.25rem - 4px);
            height: calc(1.25rem - 4px);
            background-color: #fff;
            border-radius: 50%;
            top: calc(0.15rem + 2px);
            left: calc(-2.25rem + 2px);
            transition: transform .15s ease-in-out;
        }

        .custom-control-input:checked~.custom-control-label::before {
            background-color: #007bff;
        }

        .custom-control-input:checked~.custom-control-label::after {
            transform: translateX(1rem);
        }



        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 40px !important;
        }
    </style>
@endpush