@extends('layouts.modern')

@section('page-title', 'Fields Mapping - ' . $server->name)

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
    <li class="breadcrumb-item"><a href="{{ route('servers.index') }}">Servers</a></li>
    <li class="breadcrumb-item"><a href="{{ route('servers.show', $server->id) }}">{{ $server->name }}</a></li>
    <li class="breadcrumb-item active">Fields Mapping</li>
@endsection

@section('content')
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-lg-10">
            @if (session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            <div class="card">
                <div class="card-header" style="background-color: var(--card-bg); border-bottom: 1px solid var(--border-color);">
                    <h5 class="mb-0" style="color: var(--text-primary);">
                        <i class="fas fa-exchange-alt" style="color: var(--primary-color);"></i>
                        Fields Mapping for {{ $server->name }}
                    </h5>
                </div>
                <div class="card-body" style="background-color: var(--card-bg);">
                    @if(is_array($fieldsCloud) && count($fieldsCloud) > 0)
                    <form method="POST" action="{{ route('servers.fields-mapping.update', $server->id) }}" id="fields-mapping-form">
                        @csrf
                        
                        <div class="table-responsive">
                            <table class="table table-hover table-sm">
                                <thead class="table-light">
                                    <tr>
                                        <th style="width: 80px;">#</th>
                                        <th style="width: 40%;">ESL Field</th>
                                        <th style="width: 40%;">SAP Field</th>
                                        <th style="width: 20%;">Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($fieldsCloud as $index => $fieldsCloudRow)
                                        <tr>
                                            <td>
                                                <span class="badge bg-secondary-subtle text-secondary">{{ $index + 1 }}</span>
                                            </td>
                                            <td>
                                                <select id="eslFieldSelect-{{ $fieldsCloudRow->id }}"
                                                    name="eslFieldSelect[{{ $fieldsCloudRow->id }}]" 
                                                    class="form-select form-select-sm" readonly>
                                                    <option value="{{ $fieldsCloudRow->id }}">
                                                        {{ $fieldsCloudRow->name }}
                                                    </option>
                                                </select>
                                            </td>
                                            <td>
                                                <select id="sapFieldSelect-{{ $fieldsCloudRow->id }}"
                                                    name="sapFieldSelect[{{ $fieldsCloudRow->id }}]" 
                                                    class="form-select form-select-sm">
                                                    <option value="">Select SAP Field</option>
                                                    @foreach ($dataKeys as $key => $value)
                                                        @if (in_array($key, ['__metadata']))
                                                            @continue
                                                        @endif
                                                        <option value="{{ $key }}"
                                                            {{ isset($fields[$fieldsCloudRow->id]) && $fields[$fieldsCloudRow->id] == $key ? 'selected="selected"' : '' }}>
                                                            {{ $key }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td>
                                                @if(isset($fields[$fieldsCloudRow->id]) && !empty($fields[$fieldsCloudRow->id]))
                                                    <span class="badge bg-success-subtle text-success">
                                                        <i class="fas fa-check me-1"></i>Mapped
                                                    </span>
                                                @else
                                                    <span class="badge bg-warning-subtle text-warning">
                                                        <i class="fas fa-exclamation me-1"></i>Not Mapped
                                                    </span>
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        <div class="d-flex justify-content-between align-items-center mt-4">
                            <div class="text-muted">
                                <small>
                                    <i class="fas fa-info-circle"></i>
                                    Map ESL fields to corresponding SAP fields to enable data synchronization.
                                </small>
                            </div>
                            <div class="d-flex gap-2">
                                <a href="{{ route('servers.show', $server->id) }}" class="btn btn-outline-secondary">
                                    <i class="fas fa-arrow-left me-1"></i>Back to Server
                                </a>
                                <button type="submit" class="btn btn-primary" id="fields-mappings-save-btn">
                                    <i class="fas fa-save me-1"></i>Save Mappings
                                </button>
                            </div>
                        </div>
                    </form>
                    @else
                    <div class="text-center py-5">
                        <i class="fas fa-exclamation-triangle fa-3x text-warning mb-3"></i>
                        <h4 style="color: var(--text-primary);">No Cloud Fields Available</h4>
                        <p class="text-muted">No cloud fields are available for mapping on this server.</p>
                        <a href="{{ route('servers.show', $server->id) }}" class="btn btn-outline-primary">
                            <i class="fas fa-arrow-left me-1"></i>Back to Server
                        </a>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Update status badges when SAP field selection changes
    document.querySelectorAll('select[name^="sapFieldSelect"]').forEach(function(select) {
        select.addEventListener('change', function() {
            const row = this.closest('tr');
            const statusCell = row.querySelector('td:last-child');
            
            if (this.value) {
                statusCell.innerHTML = '<span class="badge bg-success-subtle text-success"><i class="fas fa-check me-1"></i>Mapped</span>';
            } else {
                statusCell.innerHTML = '<span class="badge bg-warning-subtle text-warning"><i class="fas fa-exclamation me-1"></i>Not Mapped</span>';
            }
        });
    });
});
</script>
@endsection
        </tfoot>
    </table>
    <script>
        $(document).ready(function() {
            $('#fields-mapping-form').on('submit', function(event) {
                // prevent default click behaviour
                event.preventDefault();

                // change the button text to "Saving..."
                $('#fields-mappings-save-btn').text('Saving...');
                $('#fields-mappings-save-btn').prop('disabled', true);

                let formData = $(this).serialize();

                $.ajax({
                    url: '{{ url('servers/fields-mapping-save') }}',
                    type: 'POST',
                    data: formData,
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        // change the button text to "Saving..."
                        $('#fields-mappings-save-btn').text('Save');
                        $('#fields-mappings-save-btn').prop('disabled', false);
                    },
                    error: function(xhr, status, error) {}
                });
            });
        });
    </script>
</form>