@extends('layouts.app')

@section('title', 'Create Service Request Template')

@section('content')

    <div class="fixed-action-bar d-flex align-items-center justify-content-between">
        <div class="fw-semibold fixed-nav-title">Create Service Request Template</div>

        <div class="d-flex align-items-center">
            <i class="fa-regular fa-plus fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Add"></i>

            <button type="submit" form="templateForm" class="btn p-0" data-toggle="tooltip" title="Save">
                <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"></i>
            </button>

            <i class="fa-regular fa-edit fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Edit"></i>
            <i class="fa-regular fa-trash-can fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Delete"></i>

            <a href="{{ route('horeca.service-request-templates.index') }}">
                <i class="fa-solid fa-xmark fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center ms-1"
                    data-toggle="tooltip" title="Close"></i>
            </a>

            <i class="fa-solid fa-columns fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Columns"></i>
        </div>
    </div>

    <div class="card mt-3 rounded-border">
        <div class="card-body">
            <form id="templateForm" action="{{ route('horeca.service-request-templates.store') }}" method="POST">
                @csrf
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="name" class="form-label">Template Name <span class="text-danger">*</span></label>
                        <input type="text" name="name" id="name" class="form-control @error('name') is-invalid @enderror"
                            value="{{ old('name') }}" required>
                        @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    <div class="col-md-6 mb-3">
                        <label for="category_id" class="form-label">Category <span class="text-danger">*</span></label>
                        <select name="category_id" id="category_id"
                            class="form-control @error('category_id') is-invalid @enderror" required>
                            <option value="">Select Category</option>
                            @foreach($categories as $category)
                                <option value="{{ $category->id }}" {{ old('category_id') == $category->id ? 'selected' : '' }}>
                                    {{ $category->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('category_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    <div class="col-12 mb-3">
                        <label for="description_template" class="form-label">Description Template <span
                                class="text-danger">*</span></label>
                        <textarea name="description_template" id="description_template" rows="6"
                            class="form-control @error('description_template') is-invalid @enderror"
                            required>{{ old('description_template') }}</textarea>

                        <div class="mt-2">
                            <small class="text-muted d-block mb-2">Click placeholders below to insert them into the
                                template:</small>
                            <div class="d-flex flex-wrap gap-2">
                                <span class="badge bg-light text-dark border p-2 cursor-pointer placeholder-chip"
                                    data-placeholder="{outlet_name}">{outlet_name}</span>
                                <span class="badge bg-light text-dark border p-2 cursor-pointer placeholder-chip"
                                    data-placeholder="{workflow_name}">{workflow_name}</span>
                                <span class="badge bg-light text-dark border p-2 cursor-pointer placeholder-chip"
                                    data-placeholder="{step_name}">{step_name}</span>
                                <span class="badge bg-light text-dark border p-2 cursor-pointer placeholder-chip"
                                    data-placeholder="{response}">{response}</span>
                                <span class="badge bg-light text-dark border p-2 cursor-pointer placeholder-chip"
                                    data-placeholder="{user_name}">{user_name}</span>
                                <span class="badge bg-light text-dark border p-2 cursor-pointer placeholder-chip"
                                    data-placeholder="{date_time}">{date_time}</span>
                            </div>
                        </div>
                        @error('description_template') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                </div>

        </div>
        </form>
    </div>
    </div>

@endsection

@push('js')
    <script>
        $(document).ready(function () {
            $('.placeholder-chip').on('click', function () {
                const placeholder = $(this).data('placeholder');
                const $textarea = $('#description_template');
                const cursorPosition = $textarea.prop('selectionStart');
                const text = $textarea.val();

                $textarea.val(text.substring(0, cursorPosition) + placeholder + text.substring(cursorPosition));
                $textarea.focus();

                // Set cursor after the inserted placeholder
                const newPosition = cursorPosition + placeholder.length;
                $textarea[0].setSelectionRange(newPosition, newPosition);
            });
        });
    </script>
    <style>
        .btn {
            border: none !important;
            outline: none !important;
            box-shadow: none !important;
        }

        .btn:focus,
        .btn:active {
            outline: none !important;
            box-shadow: none !important;
        }

        .fixed-nav-btn {
            width: 32px !important;
            height: 32px !important;
            font-size: 14px !important;
            background-color: #F6F6F6 !important;
            color: #000000 !important;
            border-radius: 50% !important;
            border: none !important;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin: 0 4px;
            transition: all 0.2s;
        }

        .fixed-nav-btn:hover {
            opacity: 0.85;
            transform: scale(1.05);
        }

        .fixed-nav-btn-active {
            background-color: #FFC107 !important;
            color: #000000 !important;
        }

        .cursor-pointer {
            cursor: pointer;
        }

        .placeholder-chip {
            transition: all 0.2s;
            font-size: 0.75rem;
            font-weight: 500;
        }

        .placeholder-chip:hover {
            background-color: #FABB1E !important;
            border-color: #FABB1E !important;
            transform: translateY(-1px);
        }

        .rounded-border {
            border-radius: 12px;
            border: 1px solid #e0e0e0;
        }

        .form-label {
            color: #8D99AE;
            font-weight: 500;
            font-size: 0.85rem;
            margin-bottom: 8px;
            display: block;
        }

        .form-control {
            border: none !important;
            border-bottom: 1px solid #E5E9F2 !important;
            border-radius: 0 !important;
            padding: 0.4rem 0 !important;
            font-size: 0.95rem !important;
            background: transparent !important;
            color: #4E5E7A !important;
            box-shadow: none !important;
        }

        .form-control:focus {
            border-bottom-color: #FABB1E !important;
        }
    </style>
@endpush