@extends('org.layout.adminPanel')
@section('title', 'Category Codes')
@section('section', 'Category Codes 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;
        }
    </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>Category Code</h2>
                </div>
                <br>
                <form action="{{ route('org.category-codes.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">Range Name</label>
                        <div class="d-flex gap-2 align-items-center justify-content-center">
                            <input type="text" name="range_name" value="{{ $data->name ?? null }}{{ old('range_name') }}" id="" class="form-control" placeholder="Range name" required>
                        </div>
                        @error('range_name')
                            <p class="text-danger">{{ $message }}</p>
                        @enderror
                    </div>
                    <div>
                        <label for="" class="mb-2">Code Range</label>
                        <div class="d-flex gap-2 align-items-center justify-content-center">
                            <input type="number" min="0" name="range_start" value="{{ $data->range_start ?? null }}{{ old('range_start') }}" id="start-number" data-input="range" class="form-control text-center"
                                placeholder="Start number" required>
                            <b>To</b>
                            <input type="number" min="0" name="range_end" value="{{ $data->range_end ?? null }}{{ old('range_end') }}" id="end-number" data-input="range" class="form-control text-center" placeholder="End number"
                                required>
                        </div>
                        @error('range_start')
                            <p class="text-danger">{{ $message }}</p>
                        @enderror
                        @error('range_end')
                            <p class="text-danger">{{ $message }}</p>
                        @enderror
                    </div>
                    <br>
                    <div>
                        <label for="" class="mb-2">Codes <b id="show-range"></b></label>
                        <div class="code-area">
                            @forelse ($data->codes ?? [] as $code)
                                <div class="code-wrapper">
                                    <label for="" class="code-number fw-bold">{{ str_pad($code->code, CODE_PAD, 0, STR_PAD_LEFT) }}</label>
                                    <input type="text" name="code[{{ $code->code }}]" value="{{ $code->name }}" class="form-control code-name" placeholder="Code name">
                                </div>
                            @empty
                                <i>Please enter range of code</i>
                            @endforelse
                        </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 pad = "{{CODE_PAD}}";
        $(`[data-input="range"]`).on('input', function(e) {
            const startNumber = +$(`#start-number`).val() || 0;
            const endNumber = +$(`#end-number`).val() || 0;
            const rangeText = "(" + `${startNumber}`.padStart(pad, "0") + "-" + `${endNumber}`.padStart(pad, "0") + ")";
            if (startNumber < 1 || endNumber < 1) return;
            $(`#show-range`).text(rangeText);
            let html = ``;
            for (let i = startNumber; i <= endNumber; i++) {
                const code = `${i}`.padStart(pad, "0");
                html += `<div class="code-wrapper">
                            <label for="" class="code-number fw-bold">${code}</label>
                            <input type="text" name="code[${i}]" class="form-control code-name" placeholder="Code name">
                        </div>`;
            }
            $(`.code-area`).html(html);
        });
    </script>
@endsection