@extends('patent::layouts.master')
@section('title', 'procedures')

@section('content')
    <section class="content">

    <div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h4>Consolidate Duplicate procedures </h4>
                    <p class="text-muted">Select which procedures  to keep and which ones to consolidate into it.</p>
                </div>
                <div class="card-body">
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <strong>Whoops!</strong> There were some problems with your input.<br><br>
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form action="{{ route('patent.procedures.consolidate') }}" method="POST" id="consolidateForm">
                        @csrf
                        
                        <div class="form-group mb-4">
                            <label for="target_client_id" class="form-label">
                                <strong>Target procedures (Keep This One)</strong>
                                <span class="text-danger">*</span>
                            </label>
                            <select name="target_client_id" id="target_client_id" class="form-control select2" style="width: 100%;" required>
                                <option value="">Select the procedures to keep...</option>
                                @foreach($clients as $client)
                                    <option value="{{ $client->id }}">
                                        {{ $client->procedure_name  }} (ID: {{ $client->id }})
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group mb-4">
                            <label for="source_client_ids" class="form-label">
                                <strong>Source procedures (Consolidate These)</strong>
                                <span class="text-danger">*</span>
                            </label>
                            <select name="source_client_ids[]" id="source_client_ids" class="form-control select2" multiple="multiple" style="width: 100%;" required>
                                @foreach($clients as $client)
                                    <option value="{{ $client->id }}">
                                        {{ $client->procedure_name }} (ID: {{ $client->id }})
                                    </option>
                                @endforeach
                            </select>
                            <small class="form-text text-muted">
                                You can search and select multiple procedures using the search box.
                            </small>
                        </div>

                        <div class="alert alert-warning">
                            <strong>⚠️ Warning:</strong> This action will:
                            <ul class="mb-0 mt-2">
                                <li>Update all foreign key references in trademark tickets and patent tickets</li>
                                <li>Permanently delete the selected source applicants</li>
                                <li>This action cannot be undone!</li>
                            </ul>
                        </div>

                        <div class="form-group mb-4">
                            <label class="form-label">
                                <strong>Impact Summary</strong>
                            </label>
                            <div id="impactSummary" class="border rounded p-3 bg-light">
                                <p class="text-muted mb-0">Select procedures above to see the impact summary.</p>
                            </div>
                        </div>

                        <div class="d-flex justify-content-between">
                            <a href="{{ route('patent.procedures.index') }}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left"></i> Back to procedures
                            </a>
                            <button type="submit" class="btn btn-danger" id="consolidateBtn">
                                <i class="fas fa-merge"></i> Consolidate procedures
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection
@push('scripts')

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<!-- Select2 -->
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
$(function () {
    //Initialize Select2 Elements
    $('.select2').select2()

    //Initialize Select2 Elements
    $('.select2bs4').select2({
      theme: 'bootstrap4'
    })
  });
$(document).ready(function() {
    // Initialize Select2 for target client (single select)
    $('.select2').select2({
        placeholder: 'Select the procedures to keep...',
        allowClear: true,
        width: '100%',
        language: {
            noResults: function() {
                return "No procedures found. Try a different search term.";
            }
        }
    });

    // Initialize Select2 for source clients (multiple select)
    $('.select2').select2({
        placeholder: 'Select procedures to consolidate...',
        allowClear: true,
        width: '100%',
        closeOnSelect: false,
        language: {
            noResults: function() {
                return "No procedures found. Try a different search term.";
            }
        }
    });

    // Form validation and confirmation
    $('#consolidateForm').on('submit', function(e) {
        const targetId = $('#target_client_id').val();
        const sourceIds = $('#source_client_ids').val();

        if (!targetId || !sourceIds || sourceIds.length === 0) {
            e.preventDefault();
            alert('Please select both target and source procedures.');
            return;
        }

        if (sourceIds.includes(targetId)) {
            e.preventDefault();
            alert('Target procedures cannot be in the source list.');
            return;
        }

        if (!confirm('Are you sure you want to consolidate these procedures? This action cannot be undone!')) {
            e.preventDefault();
            return;
        }
    });

    // Real-time validation feedback and impact summary
    $('#target_client_id, #source_client_ids').on('change', function() {
        validateForm();
        updateImpactSummary();
    });

    function validateForm() {
        const targetId = $('#target_client_id').val();
        const sourceIds = $('#source_client_ids').val();
        const consolidateBtn = $('#consolidateBtn');
        
        if (targetId && sourceIds && sourceIds.length > 0 && !sourceIds.includes(targetId)) {
            consolidateBtn.prop('disabled', false);
        } else {
            consolidateBtn.prop('disabled', true);
        }
    }

    function updateImpactSummary() {
        const targetId = $('#target_client_id').val();
        const sourceIds = $('#source_client_ids').val();
        const impactSummary = $('#impactSummary');

        if (!targetId || !sourceIds || sourceIds.length === 0) {
            impactSummary.html('<p class="text-muted mb-0">Select procedures above to see the impact summary.</p>');
            return;
        }

        // Prevent self-consolidation
        if (sourceIds.includes(targetId)) {
            impactSummary.html('<p class="text-danger mb-0">❌ Error: Target procedures cannot be in the source list!</p>');
            return;
        }

        const targetText = $('#target_client_id option:selected').text();
        let sourceText = '';
        sourceIds.forEach(id => {
            const optionText = $(`#source_client_ids option[value="${id}"]`).text();
            sourceText += `<li>${optionText}</li>`;
        });

        const summary = `
            <div class="row">
                <div class="col-md-6">
                    <h6 class="text-success">✅ Target procedures (Will Keep):</h6>
                    <p class="mb-2"><strong>${targetText}</strong></p>
                </div>
                <div class="col-md-6">
                    <h6 class="text-danger">❌ Source procedures (Will Delete):</h6>
                    <ul class="mb-0">
                        ${sourceText}
                    </ul>
                </div>
            </div>
            <hr>
            <p class="text-info mb-0">
                <i class="fas fa-info-circle"></i> 
                All trademark tickets and patent tickets will be updated to reference the target client.
            </p>
        `;

        impactSummary.html(summary);
    }

    // Initial validation and impact summary
    validateForm();
    updateImpactSummary();
});
</script>
@endpush