@extends('admin.layouts.master')

@section('title', 'فرق التركيب')
@section('page_title', 'فرق التركيب')

@section('breadcrumbs')
    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">{{ __('admin.dashboard') }}</a></li>
    <li class="breadcrumb-item active">فرق التركيب</li>
@endsection

@section('content')
<div class="card">
    <div class="card-header">
        <h3 class="card-title"><i class="fas fa-users-cog"></i> فرق التركيب</h3>
        <div class="card-tools">
            @can('installations.create')
                <button type="button" class="btn btn-primary btn-sm" id="addTeamBtn">
                    <i class="fas fa-plus"></i> {{ __('admin.add') }}
                </button>
            @endcan
        </div>
    </div>
    <div class="card-body">
        <div class="row mb-3">
            <div class="col-md-3">
                <label class="small mb-1">{{ __('admin.status') }}</label>
                <select class="form-control form-control-sm filter-input" id="filter_active">
                    <option value="">—</option>
                    <option value="1">نشط</option>
                    <option value="0">متوقف</option>
                </select>
            </div>
        </div>
        <table id="teamsTable" class="table table-bordered table-striped table-hover" style="width:100%">
            <thead>
                <tr>
                    <th>#</th>
                    <th>الكود</th>
                    <th>الاسم</th>
                    <th>القائد</th>
                    <th>الفرع</th>
                    <th>الأعضاء</th>
                    <th>الأوامر</th>
                    <th>{{ __('admin.status') }}</th>
                    <th>{{ __('admin.actions') }}</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

@include('admin.installation-teams._modal')
@endsection

@push('scripts')
@include('admin._partials.crud_scripts')
<script>
$(function () {
    let memberIdx = 0;

    function addMemberRow(data) {
        const html = $('#memberRowTpl').html().replace(/__IDX__/g, memberIdx++);
        const $row = $(html);
        $('#membersTable tbody').append($row);
        $row.find('.select2-modal').select2({ dropdownParent: $('#teamModal'), width: '100%' });
        if (data) {
            $row.find('[name$="[user_id]"]').val(data.user_id).trigger('change');
            $row.find('[name$="[role]"]').val(data.role);
        }
    }

    function resetMembers() {
        $('#membersTable tbody').empty();
        memberIdx = 0;
    }

    $('#teamModal').on('shown.bs.modal', function () {
        $('.select2-modal').not('.select2-hidden-accessible').select2({ dropdownParent: $('#teamModal'), width: '100%' });
    });

    const table = $('#teamsTable').DataTable({
        processing: true, serverSide: true, responsive: true, order: [[0, 'desc']],
        ajax: {
            url: '{{ route('admin.installation-teams.data') }}',
            data: d => { d.is_active = $('#filter_active').val(); }
        },
        language: { url: OFP.dtLanguage },
        columns: [
            { data: 'id', name: 'id', width: '60px' },
            { data: 'code', name: 'code' },
            { data: 'name', name: 'name' },
            { data: 'leader_name', name: 'leader.name' },
            { data: 'branch_name', name: 'branch.name' },
            { data: 'members_badge', name: 'members_count', orderable: false, searchable: false },
            { data: 'orders_badge', name: 'orders_count', orderable: false, searchable: false },
            { data: 'is_active', name: 'is_active' },
            { data: 'actions', name: 'actions', orderable: false, searchable: false },
        ]
    });

    $('.filter-input').on('change', () => table.ajax.reload());

    $('#addTeamBtn').on('click', function () {
        $('#teamForm').trigger('reset')[0].action = '{{ route('admin.installation-teams.store') }}';
        $('#teamMethod').val('POST');
        $('#teamModalLabel').text('إضافة فريق تركيب');
        resetMembers();
        addMemberRow();
        $('#teamModal').modal('show');
    });

    $('#addMemberBtn').on('click', () => addMemberRow());
    $('#membersTable').on('click', '.remove-member-btn', function () {
        $(this).closest('tr').remove();
    });

    $('#teamsTable tbody').on('click', '.edit-team-btn', function () {
        const id = $(this).data('id');
        $.get('{{ url('admin/installation-teams') }}/' + id, function (t) {
            const members = t.members || [];
            delete t.members;
            OFP.populateForm($('#teamForm'), t);
            $('#teamForm').find('select[name="leader_id"], select[name="branch_id"]').trigger('change');
            $('#teamForm')[0].action = '{{ url('admin/installation-teams') }}/' + t.id;
            $('#teamMethod').val('PUT');
            $('#teamModalLabel').text('تعديل ' + t.name);
            resetMembers();
            members.forEach(m => addMemberRow(m));
            if (!members.length) addMemberRow();
            $('#teamModal').modal('show');
        });
    });

    @if($errors->any()) $('#teamModal').modal('show'); addMemberRow(); @endif
});
</script>
@endpush