@php
    $edit = !is_null($dataTypeContent->getKey());
    $add  = is_null($dataTypeContent->getKey());
    $errors = $errors ?? new \Illuminate\Support\ViewErrorBag();
@endphp

@extends('voyager::master')

@section('css')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <style>
        .panel-actions .voyager-trash {
            cursor: pointer;
        }
        .panel-actions .voyager-trash:hover {
            color: #e94542;
        }
        .panelConfigTabList {
            margin-bottom: 0;
            border-bottom: none;
        }
        .panelConfigTabList li a {
            padding: 8px 15px;
            font-weight: 600;
        }
        .metric-row:hover {
            background-color: #f8fafc;
        }
        .icon-preview-box i {
            transition: transform 0.2s ease;
        }
        .icon-preview-box:hover i {
            transform: scale(1.15);
        }
    </style>
@stop

@section('page_title', __('voyager::generic.'.($edit ? 'edit' : 'add')).' '.$dataType->getTranslatedAttribute('display_name_singular'))

@section('page_header')
    <h1 class="page-title">
        <i class="{{ $dataType->icon }}"></i>
        {{ __('voyager::generic.'.($edit ? 'edit' : 'add')).' '.$dataType->getTranslatedAttribute('display_name_singular') }}
    </h1>
    @include('voyager::multilingual.language-selector')
@stop

@section('content')
    <div class="page-content edit-add container-fluid">
        <div class="row">
            <div class="col-md-12">

                <div class="panel panel-bordered">
                    <!-- form start -->
                    <form role="form"
                            class="form-edit-add"
                            action="{{ $edit ? route('voyager.'.$dataType->slug.'.update', $dataTypeContent->getKey()) : route('voyager.'.$dataType->slug.'.store') }}"
                            method="POST" enctype="multipart/form-data">
                        @if($edit)
                            {{ method_field("PUT") }}
                        @endif

                        {{ csrf_field() }}

                        <div class="panel-body">

                            @if (isset($errors) && count($errors) > 0)
                                <div class="alert alert-danger">
                                    <ul>
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif

                            @php
                                $dataTypeRows = $dataType->{($edit ? 'editRows' : 'addRows' )};
                            @endphp

                            @foreach($dataTypeRows as $row)
                                @php
                                    $display_options = $row->details->display ?? NULL;
                                    if ($dataTypeContent->{$row->field.'_'.($edit ? 'edit' : 'add')}) {
                                        $dataTypeContent->{$row->field} = $dataTypeContent->{$row->field.'_'.($edit ? 'edit' : 'add')};
                                    }
                                @endphp
                                <div class="form-group @if($row->type == 'hidden') hidden @endif col-md-{{ $display_options->width ?? 12 }} {{ $errors->has($row->field) ? 'has-error' : '' }}" @if(isset($display_options->id)){{ "id=$display_options->id" }}@endif>
                                    {{ $row->slugify }}
                                    <label class="control-label" for="name">{{ $row->getTranslatedAttribute('display_name') }}</label>
                                    @include('voyager::multilingual.input-hidden-bread-edit-add')
                                    @if ($add && isset($row->details->view_add))
                                        @include($row->details->view_add, ['row' => $row, 'dataType' => $dataType, 'dataTypeContent' => $dataTypeContent, 'content' => $dataTypeContent->{$row->field}, 'view' => 'add', 'options' => $row->details])
                                    @elseif ($edit && isset($row->details->view_edit))
                                        @include($row->details->view_edit, ['row' => $row, 'dataType' => $dataType, 'dataTypeContent' => $dataTypeContent, 'content' => $dataTypeContent->{$row->field}, 'view' => 'edit', 'options' => $row->details])
                                    @elseif (isset($row->details->view))
                                        @include($row->details->view, ['row' => $row, 'dataType' => $dataType, 'dataTypeContent' => $dataTypeContent, 'content' => $dataTypeContent->{$row->field}, 'action' => ($edit ? 'edit' : 'add'), 'view' => ($edit ? 'edit' : 'add'), 'options' => $row->details])
                                    @elseif ($row->type == 'relationship')
                                        @include('voyager::formfields.relationship', ['options' => $row->details])
                                    @else
                                        {!! app('voyager')->formField($row, $dataType, $dataTypeContent) !!}
                                    @endif

                                    @foreach (app('voyager')->afterFormFields($row, $dataType, $dataTypeContent) as $after)
                                        {!! $after->handle($row, $dataType, $dataTypeContent) !!}
                                    @endforeach
                                    @if ($errors->has($row->field))
                                        @foreach ($errors->get($row->field) as $error)
                                            <span class="help-block">{{ $error }}</span>
                                        @endforeach
                                    @endif
                                </div>
                            @endforeach

                            <!-- ========================================================
                                 EMBEDDED PROJECT METRICS SECTION
                                 ======================================================== -->
                            <div class="col-md-12" style="margin-top: 30px; margin-bottom: 20px;">
                                <div class="panel panel-bordered" style="border: 1px solid #cbd5e1; border-top: 4px solid #0d9488; border-radius: 8px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);">
                                    <div class="panel-heading" style="background: #f8fafc; border-bottom: 1px solid #e2e8f0; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between;">
                                        <div>
                                            <h3 class="panel-title" style="font-size: 16px; font-weight: 700; color: #0f172a; margin: 0; display: flex; align-items: center; gap: 8px;">
                                                <i class="voyager-bar-chart" style="color: #0d9488; font-size: 18px;"></i> Project Metrics (Detail Page Sidebar)
                                            </h3>
                                            <p class="text-muted" style="margin: 4px 0 0; font-size: 12.5px;">
                                                Headline metrics shown in the sticky sidebar on this project's detail page (e.g. Total Area, Trees Planted, CO₂e Removed, Income Uplift).
                                            </p>
                                        </div>
                                        <button type="button" class="btn btn-success btn-sm" id="btnAddMetric" style="margin: 0; font-weight: 600;">
                                            <i class="voyager-plus"></i> Add Metric
                                        </button>
                                    </div>
                                    <div class="panel-body" style="padding: 15px;">
                                        <input type="hidden" name="deleted_metric_ids" id="deletedMetricIdsInput" value="">
                                        <div class="table-responsive">
                                            <table class="table table-bordered table-hover" id="projectMetricsTable" style="margin-bottom: 0;">
                                                <thead>
                                                    <tr style="background: #f1f5f9; color: #334155; font-size: 12px; font-weight: 600;">
                                                        <th style="width: 175px;">Icon</th>
                                                        <th style="width: 220px;">Metric Name <span class="text-danger">*</span></th>
                                                        <th style="width: 180px;">Value <span class="text-danger">*</span></th>
                                                        <th>Detail Note / Explanation</th>
                                                        <th style="width: 90px; text-align: center;">Order</th>
                                                        <th style="width: 50px; text-align: center;"></th>
                                                    </tr>
                                                </thead>
                                                <tbody id="metricsTableBody">
                                                    @forelse(($projectMetrics ?? []) as $idx => $m)
                                                        @php
                                                            $iconVal = $m->icon ?: 'fa-leaf';
                                                            $faClass = str_starts_with($iconVal, 'fa-') ? 'fa-solid ' . $iconVal : $iconVal;
                                                        @endphp
                                                        <tr class="metric-row" data-index="{{ $idx }}">
                                                            <input type="hidden" name="metrics[{{ $idx }}][id]" value="{{ $m->id }}">
                                                            <td>
                                                                <div style="display: flex; align-items: center; gap: 6px;">
                                                                    <div class="icon-preview-box" id="preview_icon_{{ $idx }}" style="width: 34px; height: 34px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 4px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                                                                        <i class="{{ $faClass }}" style="font-size: 16px; color: #16a34a;"></i>
                                                                    </div>
                                                                    <input type="text"
                                                                           name="metrics[{{ $idx }}][icon]"
                                                                           id="input_icon_{{ $idx }}"
                                                                           value="{{ $m->icon ?: 'fa-leaf' }}"
                                                                           class="form-control input-sm icon-input-field"
                                                                           placeholder="fa-leaf"
                                                                           style="font-family: monospace; font-size: 12px;">
                                                                    <button type="button"
                                                                            class="btn btn-default btn-sm btn-pick-icon"
                                                                            data-toggle="fa-picker"
                                                                            data-target="#input_icon_{{ $idx }}"
                                                                            data-preview="#preview_icon_{{ $idx }} i"
                                                                            title="Select Font Awesome Icon"
                                                                            style="padding: 5px 8px;">
                                                                        <i class="voyager-search"></i>
                                                                    </button>
                                                                </div>
                                                            </td>
                                                            <td>
                                                                <input type="text" name="metrics[{{ $idx }}][metric]" class="form-control input-sm" value="{{ $m->metric }}" placeholder="e.g. Total Area" required>
                                                            </td>
                                                            <td>
                                                                <input type="text" name="metrics[{{ $idx }}][value]" class="form-control input-sm" value="{{ $m->value }}" placeholder="e.g. 10,000 ha" required>
                                                            </td>
                                                            <td>
                                                                <input type="text" name="metrics[{{ $idx }}][detail]" class="form-control input-sm" value="{{ $m->detail }}" placeholder="Optional description note">
                                                            </td>
                                                            <td style="text-align: center;">
                                                                <input type="number" name="metrics[{{ $idx }}][display_order]" class="form-control input-sm text-center" value="{{ $m->display_order ?? ($idx + 1) }}">
                                                            </td>
                                                            <td style="text-align: center; vertical-align: middle;">
                                                                <button type="button" class="btn btn-xs btn-danger btn-remove-metric" title="Delete Metric">
                                                                    <i class="voyager-trash"></i>
                                                                </button>
                                                            </td>
                                                        </tr>
                                                    @empty
                                                        <tr id="noMetricsPlaceholder">
                                                            <td colspan="6" class="text-center text-muted" style="padding: 20px;">
                                                                No metrics added yet. Click <strong>Add Metric</strong> above to add headline statistics for this project.
                                                            </td>
                                                        </tr>
                                                    @endforelse
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div><!-- panel-body -->

                        <div class="panel-footer">
                            @section('submit-buttons')
                                <button type="submit" class="btn btn-primary save">{{ __('voyager::generic.save') }}</button>
                            @stop
                            @yield('submit-buttons')
                            <a href="{{ route('voyager.'.$dataType->slug.'.index') }}" class="btn btn-default">Cancel</a>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
@stop

@section('javascript')
    <script>
        $(document).ready(function () {
            var metricIndex = {{ count($projectMetrics ?? []) }};

            // Add new metric row
            $('#btnAddMetric').on('click', function () {
                $('#noMetricsPlaceholder').remove();
                metricIndex++;

                var rowHtml = `
                    <tr class="metric-row" data-index="${metricIndex}">
                        <input type="hidden" name="metrics[${metricIndex}][id]" value="">
                        <td>
                            <div style="display: flex; align-items: center; gap: 6px;">
                                <div class="icon-preview-box" id="preview_icon_${metricIndex}" style="width: 34px; height: 34px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 4px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                                    <i class="fa-solid fa-leaf" style="font-size: 16px; color: #16a34a;"></i>
                                </div>
                                <input type="text"
                                       name="metrics[${metricIndex}][icon]"
                                       id="input_icon_${metricIndex}"
                                       value="fa-leaf"
                                       class="form-control input-sm icon-input-field"
                                       placeholder="fa-leaf"
                                       style="font-family: monospace; font-size: 12px;">
                                <button type="button"
                                        class="btn btn-default btn-sm btn-pick-icon"
                                        data-toggle="fa-picker"
                                        data-target="#input_icon_${metricIndex}"
                                        data-preview="#preview_icon_${metricIndex} i"
                                        title="Select Font Awesome Icon"
                                        style="padding: 5px 8px;">
                                    <i class="voyager-search"></i>
                                </button>
                            </div>
                        </td>
                        <td>
                            <input type="text" name="metrics[${metricIndex}][metric]" class="form-control input-sm" placeholder="e.g. Total Area" required>
                        </td>
                        <td>
                            <input type="text" name="metrics[${metricIndex}][value]" class="form-control input-sm" placeholder="e.g. 10,000 ha" required>
                        </td>
                        <td>
                            <input type="text" name="metrics[${metricIndex}][detail]" class="form-control input-sm" placeholder="Optional description note">
                        </td>
                        <td style="text-align: center;">
                            <input type="number" name="metrics[${metricIndex}][display_order]" class="form-control input-sm text-center" value="${metricIndex + 1}">
                        </td>
                        <td style="text-align: center; vertical-align: middle;">
                            <button type="button" class="btn btn-xs btn-danger btn-remove-metric" title="Delete Metric">
                                <i class="voyager-trash"></i>
                            </button>
                        </td>
                    </tr>
                `;

                $('#metricsTableBody').append(rowHtml);
            });

            // Remove metric row
            $(document).on('click', '.btn-remove-metric', function () {
                var row = $(this).closest('tr');
                var id = row.find('input[type="hidden"][name*="[id]"]').val();

                if (id) {
                    var currentDeleted = $('#deletedMetricIdsInput').val();
                    var arr = currentDeleted ? currentDeleted.split(',') : [];
                    arr.push(id);
                    $('#deletedMetricIdsInput').val(arr.join(','));
                }

                row.fadeOut(200, function () {
                    $(this).remove();
                    if ($('#metricsTableBody tr').length === 0) {
                        $('#metricsTableBody').append(`
                            <tr id="noMetricsPlaceholder">
                                <td colspan="6" class="text-center text-muted" style="padding: 20px;">
                                    No metrics added yet. Click <strong>Add Metric</strong> above to add headline statistics for this project.
                                </td>
                            </tr>
                        `);
                    }
                });
            });

            // Live update preview if icon class is typed manually
            $(document).on('input', '.icon-input-field', function () {
                var val = $(this).val().trim();
                var previewBox = $(this).closest('td').find('.icon-preview-box i');
                if (val) {
                    var faClass = val.startsWith('fa-') ? 'fa-solid ' + val : val;
                    previewBox.attr('class', faClass);
                }
            });
        });
    </script>
@stop