@extends('org.layout.adminPanel')
@section('title', 'Templates')
@section('section', 'Templates forms')
@section('css')
    {{-- css --}}
    <link rel="stylesheet" href="{{ asset(CSS) }}/datatable.css">
    <link rel="stylesheet" href="{{ asset(CSS) }}/datatable.responsive.css">
    <style>
        .tag-area {
            overflow-y: auto;
            max-height: 480px;
        }

        .code-area {
            display: flex;
            flex-direction: column;
            gap: .8em;
        }

        .code-wrapper {
            display: grid;
            grid-template-columns: min-content 1fr;
            align-items: center;
            gap: .8em;
        }

        .searchbaar {
            --_width: 100%;
            --_height: 53px;
            width: var(--_width);
            height: var(--_height);
            position: relative;
        }

        .searchbaar-container {
            position: absolute;
            width: var(--_width);
            background-color: #fff;
            border-radius: calc(20px + .4em);
            padding: 0.4em;
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: min-content 0fr;
            transition: grid-template-rows 100ms;
            overflow: hidden;
        }

        .searchbaar-container[open] {
            grid-template-rows: min-content 1fr;
            box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.1);
        }

        .searchbaar-container[open] .searchbaar-result {
            border-top: 1px solid #e0e0e0;
        }

        .searchbaar-result {
            margin-top: .6em;
            border-radius: 0 0 calc(.8em + 0.4em) calc(.8em + 0.4em);
            overflow-y: auto;
            max-height: 210px;
        }

        .searchbaar-result p {
            margin: 0;
        }

        .searchbaar-item {
            padding: .6em;
        }

        .searchbaar-item:hover {
            background-color: var(--space-hover);
        }

        .searchbaar-body {
            overflow: hidden;
        }

        .searchbaar-wrapper {
            display: flex;
            align-items: center;
        }

        .searchbaar-input {
            border: 0 !important;
            flex: 1 !important;
            background-color: transparent;
            height: 40px;
            padding: 0;
        }

        .searchbaar-button {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 40px;
            aspect-ratio: 1;
            background-color: var(--primaryHover);
            border-radius: 50%;
            cursor: pointer;
        }

        .searchbaar-button:hover {
            background-color: var(--primary2);
        }

        .clip-text {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: var(--lines, 1);
            /* number of lines to show */
            line-clamp: var(--lines, 1);
            -webkit-box-orient: vertical;
            width: fit-content;
        }

        .trash-code {
            width: 40px;
            aspect-ratio: 1;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
        }

        .trash-code:hover {
            background-color: #d7dadf;
        }
    </style>
@endsection
@section('content')
    {{-- content --}}
    <div class="container-fluid">
        <div class="container">
            <div class="form-wrapper mx-auto mb-3">
                <div class="text-center py-2">
                    <h2>Template</h2>
                </div>
                <br>
                <form action="{{ route('org.template.store', compact('subdomain')) }}" method="post">
                    @csrf
                    <input type="hidden" name="is_edit" value="{{ encode($data->id ?? null) }}">
                    <div class="mb-3">
                        <label for="" class="mb-2">Template Name</label>
                        <div class="d-flex gap-2 align-items-center justify-content-center">
                            <input type="text" name="template_name" value="{{ $data->name ?? null }}{{ old('template_name') }}" id="" class="form-control" placeholder="Template name" required>
                        </div>
                        @error('template_name')
                            <p class="text-danger">{{ $message }}</p>
                        @enderror
                    </div>
                    <br>
                    <div class="d-flex gap-3 flex-wrap">
                        <div style="flex:1 1 24ch;" class="section">
                            <label for="" class="mb-2">Add unique codes</label>
                            <div class="searchbaar" style="z-index: 1">
                                <div class="searchbaar-container">
                                    <div class="searchbaar-wrapper">
                                        <input type="text" id="unique-code-search" class="searchbaar-input" placeholder="Serach">
                                        <i class="bi bi-search searchbaar-button"></i>
                                    </div>
                                    <div class="searchbaar-body">
                                        <div class="searchbaar-result">
                                            <div>
                                                <p class="text-center opacity-25">Unique codes</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <br>
                            <div>
                                <label for="">Already added</label>
                                <div id="unique-added-area">
                                    @forelse ($data?->connectedCodes?->where('section_type',Illuminate\Database\Eloquent\Model::getActualClassNameForMorph(App\Models\UniqueCode::class)) ?? [] as $code)
                                        <div class="d-flex align-items-center justify-content-between mb-1">
                                            <p class="clip-text m-0">{{ $code->section?->code ?? null }} - {{ $code->section?->name ?? null }}</p>
                                            <i class="bi bi-trash-fill trash-code" data-id="{{ $code->section_id }}" data-type='{{ $code->section_type }}'></i>
                                        </div>
                                    @empty
                                    @endforelse
                                </div>
                            </div>
                        </div>
                        <div style="flex:1 1 24ch;" class="section">
                            <label for="" class="mb-2">Add category codes</label>
                            <div class="searchbaar">
                                <div class="searchbaar-container">
                                    <div class="searchbaar-wrapper">
                                        <input type="text" id="category-code-search" class="searchbaar-input" placeholder="Serach">
                                        <i class="bi bi-search searchbaar-button"></i>
                                    </div>
                                    <div class="searchbaar-body">
                                        <div class="searchbaar-result">
                                            <div>
                                                <p class="text-center opacity-25">Category codes</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <br>
                            <div>
                                <label for="">Already added</label>
                                <div id="category-added-area">
                                    @forelse ($data?->connectedCodes?->where('section_type',Illuminate\Database\Eloquent\Model::getActualClassNameForMorph(App\Models\CategoryCode::class)) ?? [] as $code)
                                        <div class="d-flex align-items-center justify-content-between mb-1">
                                            <p class="clip-text m-0">{{ $code->section?->code ?? null }} - {{ $code->section?->name ?? null }}</p>
                                            <i class="bi bi-trash-fill trash-code" data-id="{{ $code->section_id }}" data-type='{{ $code->section_type }}'></i>
                                        </div>
                                    @empty
                                    @endforelse
                                </div>
                            </div>
                        </div>
                    </div>
                    <br>
                    <div>
                        <center>
                            <input type="submit" value="Save" class="button btn-primary">
                        </center>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@section('js')
    {{-- js --}}
    <script>
        const debounceUniqueCodeSearch = debounce(searchUniqueCode, 400);
        const debounceCategoryCodeSearch = debounce(searchCategoryCode, 400);
        $(`#unique-code-search`).on('input', debounceUniqueCodeSearch);
        $(`#category-code-search`).on('input', debounceCategoryCodeSearch);

        $(`#unique-code-search,#category-code-search`).on('focus', function() {
            const parent = this.closest(`.searchbaar`);
            $(`.searchbaar-container`, parent).attr('open', true);
        });

        $(document).on('click', function(e) {
            if (!e.target.closest('.searchbaar')) {
                $(`.searchbaar-container`).removeAttr('open');
            }
        });

        function searchUniqueCode(e) {
            const search = e.target.value.trim();
            const parent = e.target.closest('.searchbaar');
            $(`.searchbaar-container`, parent).attr('open', true);
            const resultBody = $(`.searchbaar-result`, parent);
            if (search.length < 1) return;
            $.ajax({
                type: "get",
                url: "{{ route('org.unique-codes.search', compact('subdomain')) }}",
                data: {
                    search
                },
                beforeSend: function() {
                    resultBody.html(`<center>
                                        <x-pre-loader :uibLoader="['class' => 'pre-loader']" />
                                    </center>`);
                },
                success: function(response) {
                    let html = ``;
                    if (response.length < 1) html = "<center>Not Found</center>";
                    response.forEach(data => {
                        html += ` <div class="searchbaar-item" data-type='unique-code' data-code='${data.code}'>
                                    <p>${data.code} - ${data.name}</p>
                                  </div>`;
                    });
                    resultBody.html(html);
                }
            });
        }

        function searchCategoryCode(e) {
            const search = e.target.value.trim();
            const parent = e.target.closest('.searchbaar');
            $(`.searchbaar-container`, parent).attr('open', true);
            const resultBody = $(`.searchbaar-result`, parent);
            if (search.length < 1) return;
            $.ajax({
                type: "get",
                url: "{{ route('org.category-codes.search', compact('subdomain')) }}",
                data: {
                    search
                },
                beforeSend: function() {
                    resultBody.html(`<center>
                                        <x-pre-loader :uibLoader="['class' => 'pre-loader']" />
                                    </center>`);
                },
                success: function(response) {
                    let html = ``;
                    if (response.length < 1) html = "<center>Not Found</center>";
                    response.forEach(data => {
                        html += ` <div class="searchbaar-item" data-type='category-code' data-code='${data.code}'>
                                    <p>${data.code} - ${data.name}</p>
                                  </div>`;
                    });
                    resultBody.html(html);
                }
            });
        }

        $(document).on('click', '.searchbaar-item', function() {
            const parent = this.closest(`.searchbaar`);
            const section = parent.closest(`.section`);
            const added = $(`.trash-code[data-id]`, section).toArray().map(data => data.dataset.id);
            if (added.includes(this.dataset.code)) {
                $(`.searchbaar-container`, parent).removeAttr('open');
                $(`.searchbaar-input`, parent).val("");
                quickAlert('warning', 'Already added');
                return;
            }
            let html = ``;
            if (this.dataset.type == "unique-code") {
                html = `<div class="d-flex align-items-center justify-content-between mb-1">
                                <p class="clip-text m-0">${this.firstElementChild.textContent}</p>
                                <i class="bi bi-trash-fill trash-code"></i>
                                <input type='hidden' name='unique_codes[]' value='${this.dataset.code}'>
                            </div>`;
                $(`#unique-added-area`).append(html);
            } else if (this.dataset.type == "category-code") {
                html = `<div class="d-flex align-items-center justify-content-between mb-1">
                                <p class="clip-text m-0">${this.firstElementChild.textContent}</p>
                                <i class="bi bi-trash-fill trash-code"></i>
                                <input type='hidden' name='category_codes[]' value='${this.dataset.code}'>
                            </div>`;
                $(`#category-added-area`).append(html);
            }
            $(`.searchbaar-container`, parent).removeAttr('open');
            $(`.searchbaar-input`, parent).val("");
        });
        $(document).on('click', '.trash-code', function() {
            if (this.dataset?.id != "") {
                $('form').append(`<input type='hidden' name='remove_codes[${this.dataset.type}][]' value='${this.dataset.id}'>`);
            }
            this.parentElement.remove();
        });
        $(`.searchbaar-button`).on('click', function() {
            const parent = this.closest(`.searchbaar`);
            $(`.searchbaar-input`, parent).trigger('input');
        });
    </script>
@endsection