{{-- resources/views/clearance/create_edit.blade.php --}}

@extends('app-new')

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">Clearance</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/{!! $alias !!}/home">Home</a></li>
                    <li class="breadcrumb-item"><a href="/{!! $alias !!}/clearances">Clearance</a></li>
                    <li class="breadcrumb-item active">{{ @$clearance->id ? 'Edit' : 'Create' }}</li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@push('prev-next-head')
    <div class="content-header-right text-end col-md-3 col-12">
        <div class="form-group breadcrumb-right">
            <a href="javascript:history.back()" class="btn btn-secondary btn-sm"><i data-feather="arrow-left-circle"></i>
                Back</a>
            <button type="button" data-request="ajax-submit" data-target="[role=post-data]"
                class="btn btn-primary btn-sm"><i data-feather="check-circle"></i> Submit</button>
        </div>
    </div>
@endpush


@section('content')
    <section id="column-search-datatable">
        <form method="POST" action="/{!! $alias !!}/clearances" role="post-data"
            redirect="/{!! $alias !!}/clearances">
            <input type="hidden" name="organization_id" value="{{ $organization->id }}">

            <div id="rows">
                @forelse($clearances as $i => $c)
                    <div class="row align-items-center">
                        <input type="hidden" name="clearances[{{ $i }}][id]" value="{{ $c->id }}">
                        <div class="col-md-4">
                            <label class="form-label">Sequence</label>
                            <input type="number" readonly class="form-control sequence-input"
                                name="clearances[{{ $i }}][sequence]" value="{{ $c->sequence }}">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Name</label>
                            <input type="text" class="form-control" name="clearances[{{ $i }}][name]"
                                value="{{ $c->name }}" placeholder="Name">
                        </div>
                        <div class="col-md-1 mb-1">
                            <button type="button" class="btn btn-danger remove-row w-100 mt-4">Remove</button>
                        </div>
                    </div>
                @empty
                    <div class="row align-items-center">
                        <input type="hidden" name="clearances[0][id]">
                        <div class="col-md-4">
                            <label class="form-label">Sequence</label>
                            <input type="number" readonly class="form-control sequence-input"
                                name="clearances[0][sequence]" value="1">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Name</label>
                            <input type="text" class="form-control" name="clearances[0][name]" placeholder="Name">
                        </div>
                        <div class="col-md-1 mb-1">
                            <button type="button" class="btn btn-danger remove-row w-100 mt-4">Remove</button>
                        </div>
                    </div>
                @endforelse
            </div>

            <div class="row mb-3">
                <div class="col-md-1 mb-1">
                    <button type="button" id="add-row" class="btn btn-primary">Add</button>
                </div>
            </div>
        </form>
    </section>
@endsection

@push('footer-script')
    <script src="/js/common-script.js"></script>
    <script>
        $(function() {
            const $rows = $('#rows');

            function refreshSeq() {
                $rows.children('.row').each(function(i) {
                    // update sequence value
                    $(this).find('.sequence-input').val(i + 1);
                    // reindex name attributes
                    $(this).find('input,select').each(function() {
                        let name = $(this).attr('name');
                        if (!name) return;
                        name = name.replace(/clearances\[\d+\]/, `clearances[${i}]`);
                        $(this).attr('name', name);
                    });
                });
            }

            // add new row
            $('#add-row').on('click', function() {
                const idx = $rows.children('.row').length;
                $rows.append(`
                    <div class="row align-items-center">
                        <input type="hidden" name="clearances[${idx}][id]">
                        <div class="col-md-4">
                            <label class="form-label">Sequence</label>
                            <input type="number"
                                readonly
                                class="form-control sequence-input"
                                name="clearances[${idx}][sequence]"
                                value="">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Name</label>
                            <input type="text"
                                class="form-control"
                                name="clearances[${idx}][name]"
                                placeholder="Name">
                        </div>
                        <div class="col-md-1 mb-1">
                            <button type="button" class="btn btn-danger remove-row w-100 mt-4">Remove</button>
                        </div>
                    </div>
                `);
                refreshSeq();
            });

            // remove a row
            $rows.on('click', '.remove-row', function() {
                $(this).closest('.row').remove();
                refreshSeq();
            });
        });
    </script>
@endpush