@php
    use App\Services\PC\PcFormPcIiiBLandingService;

    $pciIiiBLocEdit = canField('pc-forms', 'project_brief_descriptions', 'edit');
    $pciIiiBPeriodLoc = old('pc_iii_b_reporting_period');
    if (! is_array($pciIiiBPeriodLoc)) {
        $pciIiiBPeriodLoc = $pcForm?->pc_iii_b_reporting_period ?? ($pciCrudDraftFill['pc_iii_b_reporting_period'] ?? []);
        if (! is_array($pciIiiBPeriodLoc)) {
            $pciIiiBPeriodLoc = [];
        }
    }
    $pciIiiBDistrictBlocks = app(PcFormPcIiiBLandingService::class)
        ->normalizeDistrictsPayload($pciIiiBPeriodLoc['districts'] ?? []);
    if ($pciIiiBDistrictBlocks === []) {
        $legacyTaluka = trim((string) ($pciIiiBPeriodLoc['taluka'] ?? ''));
        $legacyUc = trim((string) ($pciIiiBPeriodLoc['union_council'] ?? ''));
        $pciIiiBDistrictBlocks = [[
            'district' => trim((string) ($pciIiiBPeriodLoc['district'] ?? '')),
            'rows' => [[
                'taluka' => $legacyTaluka,
                'union_council' => $legacyUc,
                'unit' => '',
                'contractor' => '',
                'consultant' => '',
            ]],
        ]];
    }
@endphp

@once
@push('stylesheets')
<style>
    .pci-p3b-dist-block {
        border: 1px solid #dbe4ee;
        border-radius: 12px;
        background: #fff;
        margin-bottom: 1rem;
        overflow: hidden;
        box-shadow: 0 8px 22px rgba(15, 76, 110, 0.05);
    }
    .pci-p3b-dist-head {
        display: flex;
        flex-wrap: wrap;
        gap: .65rem;
        align-items: flex-end;
        justify-content: space-between;
        padding: .75rem .9rem;
        background: linear-gradient(180deg, #f8fcff 0%, #eef5fa 100%);
        border-bottom: 1px solid #dbe4ee;
    }
    .pci-p3b-dist-head .form-group { margin-bottom: 0; flex: 1 1 240px; }
    .pci-p3b-dist-head label {
        font-size: .68rem;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: #0f4c6e;
    }
    .pci-p3b-dist-table-wrap { padding: .65rem .75rem .85rem; overflow-x: auto; }
    .pci-p3b-dist-table {
        width: 100%;
        min-width: 780px;
        margin: 0;
        border-collapse: collapse;
    }
    .pci-p3b-dist-table th {
        background: linear-gradient(135deg, #0f4c6e 0%, #1a6b8a 100%);
        color: #fff;
        font-size: .68rem;
        letter-spacing: .04em;
        text-transform: uppercase;
        padding: .45rem .4rem;
        border: 1px solid #0b3d57;
        text-align: center;
        font-weight: 700;
    }
    .pci-p3b-dist-table td {
        border: 1px solid #dbe4ee;
        padding: .3rem;
        vertical-align: middle;
    }
    .pci-p3b-dist-table input.form-control {
        font-size: .92rem;
        font-weight: 650;
        min-height: 40px;
        border-radius: 8px;
        border-color: #dbe4ee;
        color: #0f172a;
    }
    .pci-p3b-dist-actions { white-space: nowrap; text-align: center; }
    .pci-p3b-dist-toolbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: .5rem;
        margin-bottom: .75rem;
    }
    .pci-p3b-dist-toolbar .btn-primary,
    #pci-p3b-add-district {
        background: linear-gradient(180deg, #1a6b8a, #0f4c6e);
        border-color: #0f4c6e;
        font-weight: 700;
        border-radius: 8px;
    }
    .pci-p3b-dist-toolbar .btn-primary:hover,
    #pci-p3b-add-district:hover {
        background: #0b3d57;
        border-color: #0b3d57;
    }
</style>
@endpush
@endonce

<p class="text-muted small mb-2">
    Reports are district-based. Enter a district, then add Taluka / U.C. / Unit / Contractor / Consultant rows.
    Use <strong>Add District</strong> for another district in the same report.
</p>

<div class="pci-p3b-dist-toolbar">
    <span class="small text-muted mb-0">District sections</span>
    @if($pciIiiBLocEdit)
    <button type="button" class="btn btn-sm btn-primary" id="pci-p3b-add-district">+ Add District</button>
    @endif
</div>

<div id="pci-p3b-districts-host"
     data-pci-p3b-editable="{{ $pciIiiBLocEdit ? '1' : '0' }}">
    @foreach($pciIiiBDistrictBlocks as $dIndex => $block)
        @php
            $dName = (string) ($block['district'] ?? '');
            $dRows = is_array($block['rows'] ?? null) ? $block['rows'] : [[]];
            if ($dRows === []) {
                $dRows = [[]];
            }
        @endphp
        <div class="pci-p3b-dist-block" data-p3b-district-index="{{ $dIndex }}">
            <div class="pci-p3b-dist-head">
                <div class="form-group">
                    <label>District <span class="text-danger">*</span></label>
                    <input type="text"
                           name="pc_iii_b_reporting_period[districts][{{ $dIndex }}][district]"
                           class="form-control pci-p3b-district-name"
                           value="{{ $dName }}"
                           placeholder="Enter district name"
                           @if(! $pciIiiBLocEdit) readonly @endif>
                </div>
                <div class="d-flex align-items-center gap-2">
                    @if($pciIiiBLocEdit)
                    <button type="button" class="btn btn-sm btn-outline-primary pci-p3b-add-row">+ Add row</button>
                    <button type="button" class="btn btn-sm btn-outline-danger pci-p3b-remove-district" title="Remove district">Remove</button>
                    @endif
                </div>
            </div>
            <div class="pci-p3b-dist-table-wrap">
                <table class="pci-p3b-dist-table">
                    <thead>
                        <tr>
                            <th>Taluka</th>
                            <th>U.C</th>
                            <th>Unit</th>
                            <th>Contractor</th>
                            <th>Consultant</th>
                            @if($pciIiiBLocEdit)<th style="width:70px"></th>@endif
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($dRows as $rIndex => $row)
                        <tr>
                            <td><input type="text" class="form-control" name="pc_iii_b_reporting_period[districts][{{ $dIndex }}][rows][{{ $rIndex }}][taluka]" value="{{ $row['taluka'] ?? '' }}" placeholder="Taluka" @if(! $pciIiiBLocEdit) readonly @endif></td>
                            <td><input type="text" class="form-control" name="pc_iii_b_reporting_period[districts][{{ $dIndex }}][rows][{{ $rIndex }}][union_council]" value="{{ $row['union_council'] ?? '' }}" placeholder="U.C" @if(! $pciIiiBLocEdit) readonly @endif></td>
                            <td><input type="text" class="form-control" name="pc_iii_b_reporting_period[districts][{{ $dIndex }}][rows][{{ $rIndex }}][unit]" value="{{ $row['unit'] ?? '' }}" placeholder="Unit" @if(! $pciIiiBLocEdit) readonly @endif></td>
                            <td><input type="text" class="form-control" name="pc_iii_b_reporting_period[districts][{{ $dIndex }}][rows][{{ $rIndex }}][contractor]" value="{{ $row['contractor'] ?? '' }}" placeholder="Contractor" @if(! $pciIiiBLocEdit) readonly @endif></td>
                            <td><input type="text" class="form-control" name="pc_iii_b_reporting_period[districts][{{ $dIndex }}][rows][{{ $rIndex }}][consultant]" value="{{ $row['consultant'] ?? '' }}" placeholder="Consultant" @if(! $pciIiiBLocEdit) readonly @endif></td>
                            @if($pciIiiBLocEdit)
                            <td class="pci-p3b-dist-actions">
                                <button type="button" class="btn btn-sm btn-outline-danger pci-p3b-remove-row" title="Remove row">−</button>
                            </td>
                            @endif
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    @endforeach
</div>

{{-- Keep legacy ids so scheme-detail JS does not error --}}
<input type="hidden" id="pci-district" value="">
<input type="hidden" id="pci-taluka" value="">
<input type="hidden" id="pci-union-council" value="">
<input type="hidden" id="pci-scheme-executing-agency" value="">

@once
@push('scripts')
<script>
(function ($) {
    if (window.__pciP3bDistrictUiBound) return;
    window.__pciP3bDistrictUiBound = true;

    function nextDistrictIndex() {
        var max = -1;
        $('#pci-p3b-districts-host .pci-p3b-dist-block').each(function () {
            var i = parseInt($(this).attr('data-p3b-district-index'), 10);
            if (!isNaN(i) && i > max) max = i;
        });
        return max + 1;
    }

    function reindexBlock($block, dIndex) {
        $block.attr('data-p3b-district-index', dIndex);
        $block.find('.pci-p3b-district-name').attr('name', 'pc_iii_b_reporting_period[districts][' + dIndex + '][district]');
        $block.find('tbody tr').each(function (rIndex) {
            $(this).find('input').each(function () {
                var name = $(this).attr('name') || '';
                var field = 'taluka';
                if (name.indexOf('[union_council]') >= 0) field = 'union_council';
                else if (name.indexOf('[unit]') >= 0) field = 'unit';
                else if (name.indexOf('[contractor]') >= 0) field = 'contractor';
                else if (name.indexOf('[consultant]') >= 0) field = 'consultant';
                else if (name.indexOf('[taluka]') >= 0) field = 'taluka';
                $(this).attr('name', 'pc_iii_b_reporting_period[districts][' + dIndex + '][rows][' + rIndex + '][' + field + ']');
            });
        });
    }

    function districtBlockHtml(dIndex) {
        return '' +
            '<div class="pci-p3b-dist-block" data-p3b-district-index="' + dIndex + '">' +
            '  <div class="pci-p3b-dist-head">' +
            '    <div class="form-group"><label>District <span class="text-danger">*</span></label>' +
            '      <input type="text" name="pc_iii_b_reporting_period[districts][' + dIndex + '][district]" class="form-control pci-p3b-district-name" placeholder="Enter district name">' +
            '    </div>' +
            '    <div class="d-flex align-items-center gap-2">' +
            '      <button type="button" class="btn btn-sm btn-outline-primary pci-p3b-add-row">+ Add row</button>' +
            '      <button type="button" class="btn btn-sm btn-outline-danger pci-p3b-remove-district" title="Remove district">Remove</button>' +
            '    </div>' +
            '  </div>' +
            '  <div class="pci-p3b-dist-table-wrap"><table class="pci-p3b-dist-table">' +
            '    <thead><tr><th>Taluka</th><th>U.C</th><th>Unit</th><th>Contractor</th><th>Consultant</th><th style="width:70px"></th></tr></thead>' +
            '    <tbody>' + rowHtml(dIndex, 0) + '</tbody>' +
            '  </table></div>' +
            '</div>';
    }

    function rowHtml(dIndex, rIndex) {
        return '<tr>' +
            '<td><input type="text" class="form-control" name="pc_iii_b_reporting_period[districts][' + dIndex + '][rows][' + rIndex + '][taluka]" placeholder="Taluka"></td>' +
            '<td><input type="text" class="form-control" name="pc_iii_b_reporting_period[districts][' + dIndex + '][rows][' + rIndex + '][union_council]" placeholder="U.C"></td>' +
            '<td><input type="text" class="form-control" name="pc_iii_b_reporting_period[districts][' + dIndex + '][rows][' + rIndex + '][unit]" placeholder="Unit"></td>' +
            '<td><input type="text" class="form-control" name="pc_iii_b_reporting_period[districts][' + dIndex + '][rows][' + rIndex + '][contractor]" placeholder="Contractor"></td>' +
            '<td><input type="text" class="form-control" name="pc_iii_b_reporting_period[districts][' + dIndex + '][rows][' + rIndex + '][consultant]" placeholder="Consultant"></td>' +
            '<td class="pci-p3b-dist-actions"><button type="button" class="btn btn-sm btn-outline-danger pci-p3b-remove-row" title="Remove row">−</button></td>' +
            '</tr>';
    }

    $(document).on('click', '#pci-p3b-add-district', function () {
        var $host = $('#pci-p3b-districts-host');
        if ($host.attr('data-pci-p3b-editable') !== '1') return;
        var idx = nextDistrictIndex();
        $host.append(districtBlockHtml(idx));
    });

    $(document).on('click', '.pci-p3b-remove-district', function () {
        var $host = $('#pci-p3b-districts-host');
        if ($host.find('.pci-p3b-dist-block').length <= 1) {
            $(this).closest('.pci-p3b-dist-block').find('input').val('');
            return;
        }
        $(this).closest('.pci-p3b-dist-block').remove();
    });

    $(document).on('click', '.pci-p3b-add-row', function () {
        var $block = $(this).closest('.pci-p3b-dist-block');
        var dIndex = parseInt($block.attr('data-p3b-district-index'), 10) || 0;
        var rIndex = $block.find('tbody tr').length;
        $block.find('tbody').append(rowHtml(dIndex, rIndex));
    });

    $(document).on('click', '.pci-p3b-remove-row', function () {
        var $tbody = $(this).closest('tbody');
        if ($tbody.find('tr').length <= 1) {
            $tbody.find('input').val('');
            return;
        }
        var $block = $(this).closest('.pci-p3b-dist-block');
        $(this).closest('tr').remove();
        reindexBlock($block, parseInt($block.attr('data-p3b-district-index'), 10) || 0);
    });
})(jQuery);
</script>
@endpush
@endonce