@include('admin.layouts.header')
@include('admin.layouts.sidebar')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
.select2-container {
    display: block !important;
    width: 100% !important;
}
/* Hide native form-control arrow/background */
select.select2,
select.form-control.select2 {
    background-image: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}
/* Hide all select2 arrow and clear icons */
.select2-container--default .select2-selection--single .select2-selection__arrow,
.select2-container--default .select2-selection--single .select2-selection__clear,
.select2-selection__arrow,
.select2-selection__clear {
    display: none !important;
}
.select2-container--default .select2-selection--single {
    background-color: #fff !important;
    border: 1px solid #ebedf2 !important;
    border-radius: 4px !important;
    height: 38px !important;
    position: relative !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #575962 !important;
    line-height: 36px !important;
    text-align: center !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    width: 100% !important;
}
.select2-container--default .select2-selection--multiple {
    background-color: #fff !important;
    border: 1px solid #ebedf2 !important;
    border-radius: 4px !important;
    min-height: 38px !important;
    padding: 3px 6px !important;
    display: flex !important;
    align-items: center !important;
}
.select2-container--default .select2-selection--multiple .select2-search--inline {
    width: 100% !important;
    text-align: center !important;
}
.select2-container--default .select2-selection--multiple .select2-search__field {
    text-align: center !important;
    margin-top: 0 !important;
}
.select2-dropdown {
    border-color: #ebedf2 !important;
    box-shadow: 0px 0px 15px 1px rgba(69, 65, 78, 0.1) !important;
    z-index: 99999 !important;
}
.select2-container--default .select2-search--dropdown {
    padding: 8px !important;
    display: block !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #ebedf2 !important;
    border-radius: 4px !important;
    padding: 6px 10px !important;
    outline: none !important;
    width: 100% !important;
}
</style>

<div class="m-grid__item m-grid__item--fluid m-wrapper">
    <div class="m-subheader">
        <div class="d-flex align-items-center">
            <div class="mr-auto">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    Partner Document Configuration - {{ $partner->name }}
                </h3>
            </div>
            <div>
                <a href="/admin/partner-system/document-masters" class="btn btn-info m-btn m-btn--icon mr-2">
                    <span><i class="fa fa-cogs"></i>&nbsp; Manage Master Categories & Documents</span>
                </a>
                <a href="/admin/partner-system/partners" class="btn btn-secondary m-btn m-btn--icon">
                    <span><i class="fa fa-arrow-left"></i>&nbsp; Back to Partners</span>
                </a>
            </div>
        </div>
    </div>

    <div class="m-content">
        @if(Session::has('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <button type="button" class="close" data-dismiss="alert"></button>
                {{ Session::get('success') }}
            </div>
        @endif
        @if(Session::has('info'))
            <div class="alert alert-info alert-dismissible fade show" role="alert">
                <button type="button" class="close" data-dismiss="alert"></button>
                {{ Session::get('info') }}
            </div>
        @endif
        @if(Session::has('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <button type="button" class="close" data-dismiss="alert"></button>
                {{ Session::get('error') }}
            </div>
        @endif

        <!-- Card 1: Assign Document Requirement Form -->
        <div class="m-portlet m-portlet--mobile mb-4">
            <div class="m-portlet__head">
                <div class="m-portlet__head-caption">
                    <div class="m-portlet__head-title">
                        <span class="m-portlet__head-icon"><i class="fa fa-plus-circle text-primary"></i></span>
                        <h3 class="m-portlet__head-text">Assign Document Requirement</h3>
                    </div>
                </div>
            </div>
            <div class="m-portlet__body">
                <form action="/admin/partner-system/partners/{{ $partner->id }}/config" method="POST">
                    {{ csrf_field() }}

                    <div class="row">
                        <!-- Stage Selection -->
                        <div class="col-md-3 form-group">
                            <label class="font-weight-bold">Stage <span class="text-danger">*</span></label>
                            <select name="stage" class="form-control select2" data-placeholder="-- Select Stage --" required>
                                <option value="" disabled selected>-- Select Stage --</option>
                                <option value="pre_sanction">Pre-Sanction</option>
                                <option value="post_sanction">Post-Sanction</option>
                            </select>
                        </div>

                        <!-- Main Category Selection -->
                        <div class="col-md-3 form-group">
                            <label class="font-weight-bold">Main Category <span class="text-danger">*</span></label>
                            <select name="category_id" id="assign_category_id" class="form-control select2" data-placeholder="-- Select Main Category --" required>
                                <option value="" disabled selected>-- Select Main Category --</option>
                                @foreach($categories as $cat)
                                    <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Sub Category Selection -->
                        <div class="col-md-3 form-group">
                            <label class="font-weight-bold">Sub-Category <span class="text-danger">*</span></label>
                            <select name="sub_category_id" id="assign_sub_category_id" class="form-control select2" data-placeholder="-- Select Sub-Category --" required>
                                <option value="" disabled selected>-- Select Sub-Category --</option>
                            </select>
                        </div>

                        <!-- Master Document Selection -->
                        <div class="col-md-3 form-group">
                            <label class="font-weight-bold">Master Document(s) <span class="text-danger">*</span></label>
                            <select name="document_master_ids[]" id="assign_document_ids" class="form-control select2" multiple data-placeholder="-- Select Sub-Category First --" required>
                                <!-- Populated dynamically based on Sub-Category selection -->
                            </select>
                        </div>
                    </div>

                    <div class="text-right mt-3">
                        <button type="submit" class="btn btn-primary m-btn m-btn--icon">
                            <span><i class="fa fa-plus"></i>&nbsp; Assign Selected Document(s)</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Card 2: Assigned Document Requirements Table -->
        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__head">
                <div class="m-portlet__head-caption">
                    <div class="m-portlet__head-title">
                        <span class="m-portlet__head-icon"><i class="fa fa-list text-info"></i></span>
                        <h3 class="m-portlet__head-text">Assigned Document Requirements <small class="text-muted">({{ count($assignedConfigs) }})</small></h3>
                    </div>
                </div>
            </div>
            <div class="m-portlet__body p-0">
                <div class="table-responsive">
                    <table class="table table-striped table-bordered m-table mb-0">
                        <thead>
                            <tr style="background-color: #f7f8fa;">
                                <th style="width: 50px;">#</th>
                                <th style="width: 140px;">Stage</th>
                                <th>Main Category</th>
                                <th>Sub-Category</th>
                                <th>Master Document</th>
                                <th style="width: 110px;" class="text-center">Requirement</th>
                                <th style="width: 90px;" class="text-center">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($assignedConfigs as $index => $cfg)
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    <td>
                                        @if($cfg->stage == 'pre_sanction')
                                            <span class="badge badge-primary"><i class="fa fa-clock-o"></i> Pre-Sanction</span>
                                        @else
                                            <span class="badge badge-success"><i class="fa fa-check-circle"></i> Post-Sanction</span>
                                        @endif
                                    </td>
                                    <td>
                                        <strong>{{ $cfg->category->name ?? '—' }}</strong>
                                    </td>
                                    <td>
                                        @if($cfg->subCategory)
                                            <span class="text-info">&hookrightarrow; {{ $cfg->subCategory->name }}</span>
                                        @else
                                            <span class="text-muted">—</span>
                                        @endif
                                    </td>
                                    <td>
                                        <strong>{{ $cfg->documentMaster->name ?? '—' }}</strong>
                                        @if(isset($cfg->documentMaster->docCategory))
                                            <span class="badge badge-light text-success ml-1"><i class="fa fa-tag"></i> {{ $cfg->documentMaster->docCategory->name }}</span>
                                        @endif
                                        @if(isset($cfg->documentMaster->code))
                                            <br><code>{{ $cfg->documentMaster->code }}</code>
                                        @endif
                                    </td>
                                    <td class="text-center align-middle">
                                        <span class="badge badge-danger">Mandatory</span>
                                    </td>
                                    <td class="text-center align-middle">
                                        <form action="/admin/partner-system/partners/{{ $partner->id }}/config/{{ $cfg->id }}/delete" 
                                              method="POST" onsubmit="return confirm('Remove this document requirement assignment?')">
                                            {{ csrf_field() }}
                                            <button type="submit" class="btn btn-sm btn-outline-danger m-btn m-btn--icon" title="Remove Requirement">
                                                <i class="fa fa-trash"></i>
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="text-center text-muted py-5">
                                        <i class="fa fa-file-text-o fa-3x mb-3 text-muted"></i>
                                        <p class="font-weight-bold mb-1">No Document Requirements Assigned Yet</p>
                                        <p class="small text-muted mb-0">Use the form above to select Stage, Main Category, Sub-Category, and Master Document to assign.</p>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@include('admin.layouts.footer')

<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
var categorySubMap = {
    @foreach($categories as $cat)
        "{{ $cat->id }}": [
            @foreach($cat->subCategories as $sub)
                { id: {{ $sub->id }}, name: "{{ addslashes($sub->name) }}" },
            @endforeach
        ],
    @endforeach
};

var allMasterDocuments = [
    @foreach($documents as $doc)
        {
            id: {{ $doc->id }},
            category_id: "{{ $doc->category_id ?? '' }}",
            sub_category_id: "{{ $doc->sub_category_id ?? '' }}",
            name: "{{ addslashes($doc->name) }}",
            code: "{{ addslashes($doc->code ?? '') }}",
            doc_category: "{{ addslashes($doc->docCategory->name ?? '') }}"
        },
    @endforeach
];

$(document).ready(function() {
    $('.select2').select2({
        width: '100%',
        allowClear: false,
        minimumResultsForSearch: 0,
        placeholder: function() {
            return $(this).data('placeholder') || '-- Select --';
        }
    });

    $('#assign_category_id').on('change', function() {
        var catId = $(this).val();
        loadSubCategories(catId);
        filterMasterDocuments();
    });

    $('#assign_sub_category_id').on('change', function() {
        filterMasterDocuments();
    });
});

function loadSubCategories(catId) {
    var $subSelect = $('#assign_sub_category_id');
    $subSelect.empty().append('<option value="" disabled selected>-- Select Sub-Category --</option>');
    if (catId && categorySubMap[catId]) {
        categorySubMap[catId].forEach(function(sub) {
            $subSelect.append('<option value="' + sub.id + '">' + sub.name + '</option>');
        });
    }
    $subSelect.val('').trigger('change.select2');
}

function filterMasterDocuments() {
    var catId = $('#assign_category_id').val();
    var subCatId = $('#assign_sub_category_id').val();
    var $docSelect = $('#assign_document_ids');

    $docSelect.empty();

    // Show master document list once Sub-Category is selected
    if (!catId || !subCatId) {
        $docSelect.trigger('change.select2');
        return;
    }

    allMasterDocuments.forEach(function(doc) {
        var label = doc.name + (doc.doc_category ? ' [' + doc.doc_category + ']' : '');
        $docSelect.append('<option value="' + doc.id + '">' + label + '</option>');
    });

    $docSelect.trigger('change.select2');
}
</script>