@extends('adminlte::page')

@section('content')
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Sub Admins</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{route('admin.home')}}">Home</a></li>
                    <li class="breadcrumb-item">User Manager</li>
                    <li class="breadcrumb-item active">Sub Admins</li>
                    <!-- <li class="breadcrumb-item active">India Clubs</li> -->
                </ol>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>

<!-- Main content -->
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">List Of Sub Admins</h3>
                    </div>
                    <div class="filter-group pl-4 pt-4">
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-add-user">
                            Add Sub Admin
                        </button>
                    </div>

                    @if(session('success'))
                    <div class="alert alert-success alert-dismissible fade show mx-3" role="alert">
                        {{ session('success') }}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    @endif

                    @if(session('error'))
                    <div class="alert alert-danger alert-dismissible fade show mx-3" role="alert">
                        {{ session('error') }}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    @endif


                    <div class="card-body table-responsive">
                        <!-- <p class="text-right font-bold mb-2 total_clients">Total No. of Clubs: 0</p> -->
                        <table id="example" class="table table-bordered table-striped ">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Name</th>
                                    <th>Role</th>
                                    <th>Phone</th>
                                    <th>Email</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if(isset($subAdmins))
                                @foreach($subAdmins as $all)
                                <tr>
                                    <td>{{$all['id']}}</td>
                                    <td>{!!$all['name']!!}</td>
                                    <td>{{ $all->getRoleNames()->first() ?? 'No Role' }}</td>
                                    <td>{{ !empty($all['phone']) ? $all['phone'] : '' }}</td>
                                    <td>{{ !empty($all['email']) ? $all['email'] : '' }}</td>
                                    <td>
                                        @if($all['status'] == 1)
                                        <span class="badge badge-success">Active</span>
                                        @else
                                        <span class="badge badge-danger">Inactive</span>
                                        @endif
                                    </td>
                                    <td class="text-center py-0 align-middle">
                                        <div class="btn-group btn-group-sm">

                                            <!-- Add Department Button -->
                                            <a href="javascript:void(0);" class="add_department"
                                                data-id="{{ $all['id'] }}" title="Add Department">
                                                <i class="fas fa-plus-circle" style="color:#007bff;"></i>
                                            </a>&nbsp;&nbsp;

                                            <!-- Edit button (adjust or remove unused data-* attributes as needed) -->
                                            <a href="javascript:void(0);" class="edit_club" data-id="{{ $all['id'] }}"
                                                data-name="{{ $all['name'] }}"
                                                data-phone="{{ !empty($all['phone']) ? $all['phone'] : '' }}"
                                                data-email="{{ !empty($all['email']) ? $all['email'] : '' }}"
                                                data-role="{{ $all->getRoleNames()->first() }}" data-toggle="modal"
                                                data-target="#modal-edit">
                                                <i class="fas fa-edit"></i>
                                            </a>&nbsp;&nbsp;

                                            <!-- Status change -->
                                            <a href="javascript:void(0)" class="status_change"
                                                data-id="{{ $all['id'] }}">
                                                <i class="fas fa-exchange-alt"></i>
                                            </a>&nbsp;&nbsp;

                                            <!-- Delete -->
                                            <a href="javascript:void(0)" class="delete_product_category"
                                                data-id="{{ $all['id'] }}">
                                                <i class="fas fa-trash" style="color:red;"></i>
                                            </a>

                                        </div>
                                    </td>

                                </tr>
                                @endforeach
                                @endif

                            </tbody>
                            <tfoot>
                                <tr>
                                    <th>ID</th>
                                    <th>Name</th>
                                    <th>Role</th>
                                    <th>Phone</th>
                                    <th>Email</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                    <!-- /.card-body -->
                </div>
                <!-- /.card -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </div>
    <!-- /.container-fluid -->

    <div class="modal fade" id="modal-add-user" tabindex="-1" aria-labelledby="modal-add-user-label" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">

                <!-- Modal Header -->
                <div class="modal-header bg-primary text-white">
                    <h4 class="modal-title" id="modal-add-user-label">Add New Sub Admin</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <!-- Modal Form -->
                <form id="add_user_form" action="{{ route('admin.saveSubAdmins') }}" method="POST">
                    @csrf

                    <div class="modal-body">
                        <div class="row">
                            <!-- Name -->
                            <div class="col-md-6 mb-3">
                                <label for="name" class="form-label">Name <span class="text-danger">*</span></label>
                                <input type="text" name="name" id="name"
                                    class="form-control @error('name') is-invalid @enderror" placeholder="Enter Name"
                                    value="{{ old('name') }}" required>
                                @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Email -->
                            <div class="col-md-6 mb-3">
                                <label for="email" class="form-label">Email <span class="text-danger">*</span></label>
                                <input type="email" name="email" id="email"
                                    class="form-control @error('email') is-invalid @enderror" placeholder="Enter Email"
                                    value="{{ old('email') }}" required>
                                @error('email')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row">
                            <!-- Phone -->
                            <div class="col-md-6 mb-3">
                                <label for="phone" class="form-label">Phone <span class="text-danger">*</span></label>
                                <input type="text" name="phone" id="phone"
                                    class="form-control @error('phone') is-invalid @enderror"
                                    placeholder="Enter Phone Number" value="{{ old('phone') }}" required>
                                @error('phone')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Password -->
                            <div class="col-md-6 mb-3">
                                <label for="password" class="form-label">Password <span
                                        class="text-danger">*</span></label>
                                <input type="password" name="password" id="password"
                                    class="form-control @error('password') is-invalid @enderror"
                                    placeholder="Enter Password" required>
                                @error('password')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row">
                            <!-- Assign Role -->
                            <div class="col-md-6 mb-3">
                                <label for="role" class="form-label">Assign Role <span
                                        class="text-danger">*</span></label>
                                <select name="role" id="role" class="form-control @error('role') is-invalid @enderror"
                                    required>
                                    <option value="" disabled {{ old('role') ? '' : 'selected' }}>Select Role</option>
                                    @foreach($roles as $role)
                                    <option value="{{ $role->name }}" {{ old('role')==$role->name ? 'selected' : '' }}>
                                        {{ ucfirst($role->name) }}
                                    </option>
                                    @endforeach
                                </select>
                                @error('role')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Modal Footer -->
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save"></i> Save
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- /.modal add-->

    <div class="modal fade" id="modal-edit" tabindex="-1" aria-labelledby="modal-edit-user-label" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header bg-primary text-white">
                    <h4 class="modal-title" id="modal-edit-user-label">Edit Sub Admin</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <!-- Edit Form -->
                <form id="edit_user_form" method="POST">
                    @csrf
                    @method('PUT')
                    <input type="hidden" name="edit_id" id="edit_id">

                    <div class="modal-body">
                        <div class="row">
                            <!-- Name -->
                            <div class="col-md-6 mb-3">
                                <label for="edit_name" class="form-label">Name <span
                                        class="text-danger">*</span></label>
                                <input type="text" name="name" id="edit_name" class="form-control"
                                    placeholder="Enter Name" required>
                            </div>

                            <!-- Email -->
                            <div class="col-md-6 mb-3">
                                <label for="edit_email" class="form-label">Email <span
                                        class="text-danger">*</span></label>
                                <input type="email" name="email" id="edit_email" class="form-control"
                                    placeholder="Enter Email" required>
                            </div>
                        </div>

                        <div class="row">
                            <!-- Phone -->
                            <div class="col-md-6 mb-3">
                                <label for="edit_phone" class="form-label">Phone <span
                                        class="text-danger">*</span></label>
                                <input type="text" name="phone" id="edit_phone" class="form-control"
                                    placeholder="Enter Phone Number" required>
                            </div>

                            <!-- Role -->
                            <div class="col-md-6 mb-3">
                                <label for="edit_role" class="form-label">Role <span
                                        class="text-danger">*</span></label>
                                <select name="role" id="edit_role" class="form-control" required>
                                    <option value="" disabled>Select Role</option>
                                    @foreach($roles as $role)
                                    <option value="{{ $role->name }}">{{ ucfirst($role->name) }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="row">
                            <!-- Password (optional update) -->
                            <div class="col-md-6 mb-3">
                                <label for="edit_password" class="form-label">New Password</label>
                                <input type="password" name="password" id="edit_password"
                                    class="form-control @error('password') is-invalid @enderror"
                                    placeholder="Enter new password (leave blank to keep current)">
                                @error('password')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- /.modal edit-->

    <!-- <div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" style="min-width: 700px;">
                <div class="modal-body">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <img src="" class="imagepreview" style="width: 100%;">
                </div>
            </div>
        </div>
    </div> -->

    {{-- make prefill assignments available to JS --}}
    <script>
        window.DEPT_ASSIGN = @json($assignments ?? []);
    </script>

    <div class="modal fade" id="modal-add-department" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">

                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title">Assign Departments</h5>
                    <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                </div>

                <form id="departmentAssignForm" method="POST" action="{{ route('admin.departments.save') }}">
                    @csrf
                    <input type="hidden" name="sub_admin_id" id="dept_sub_admin_id">

                    <div class="modal-body">
                        <div id="deptRows"></div>

                        <button type="button" class="btn btn-outline-primary mt-3" id="addDeptRowBtn">
                            <i class="fas fa-plus"></i> Add another
                        </button>
                    </div>

                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save"></i> Save
                        </button>
                    </div>
                </form>

                {{-- cleaner template with explicit label hooks --}}
                <template id="deptRowTemplate">
                    <div class="dept-row border rounded p-3 mb-2 position-relative">
                        <div class="form-row">
                            <div class="form-group col-md-8 mb-2">
                                <label>Choose Department <span class="text-danger">*</span></label>
                                <select class="form-control dept-select" required>
                                    <option value="" selected disabled>Select Department</option>
                                    @foreach($departments as $department)
                                    <option value="{{ $department->id }}">{{ $department->name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="form-group col-md-4 mb-2 d-flex align-items-end justify-content-between">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input email-checkbox" />
                                    <label class="custom-control-label email-label">Email</label>
                                </div>

                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input dashboard-checkbox" />
                                    <label class="custom-control-label dashboard-label">Dashboard</label>
                                </div>
                            </div>
                        </div>

                        <button type="button" class="btn btn-sm btn-link text-danger remove-row"
                            style="position:absolute;top:8px;right:8px;display:none;">
                            <i class="fas fa-times"></i> remove
                        </button>
                    </div>
                </template>

            </div>
        </div>
    </div>


</section>
<!-- /.content -->
@stop

@section('js')
@include('admin.affiliated-clubs.scripts.index')
<script>
    $(document).ready(function () {
        $('#example').DataTable();
        $('.summernote').summernote();

        // Automatically open the add modal if validation errors exist
        @if ($errors -> any())
            $('#modal-add-user').modal('show');
        @endif

        // Auto-hide alerts
        setTimeout(() => {
            $('.alert-dismissible').fadeOut('slow');
        }, 4000);

        // SweetAlert for Status Change
        $('.status_change').click(function () {
            const adminId = $(this).data('id');

            Swal.fire({
                title: 'Are you sure?',
                text: "Do you want to change this sub admin's status?",
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#17a2b8',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Yes, change it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    window.location.href = '/admin/sub-admin/status-change/' + adminId;
                }
            });
        });

        // SweetAlert for Delete
        $('.delete_product_category').click(function () {
            const adminId = $(this).data('id');

            Swal.fire({
                title: 'Are you sure?',
                text: "This action will permanently delete the sub admin!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#e3342f',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    window.location.href = '/admin/sub-admin/delete/' + adminId;
                }
            });
        });

        $('.edit_club').on('click', function () {
            const id = $(this).data('id');
            const name = $(this).data('name');
            const phone = $(this).data('phone');
            const email = $(this).data('email');
            const role = $(this).data('role');

            $('#edit_id').val(id);
            $('#edit_name').val(name);
            $('#edit_email').val(email);
            $('#edit_phone').val(phone);
            $('#edit_role').val(role);

            const actionUrl = `/admin/sub-admin/update/${id}`;
            $('#edit_user_form').attr('action', actionUrl);
        });
    });
</script>
<script>
    $(function () {
        const $modal = $('#modal-add-department');
        const $rowsWrap = $('#deptRows');
        const $form = $('#departmentAssignForm');
        const tpl = document.getElementById('deptRowTemplate');
        let rowIndex = 0;

        // open modal + prefill
        $(document).on('click', '.add_department', function () {
            const subAdminId = String($(this).data('id') || '');
            if (!subAdminId) return;

            $('#dept_sub_admin_id').val(subAdminId);

            // reset UI
            $rowsWrap.empty();
            rowIndex = 0;

            // prefill from server-provided json
            const items = (window.DEPT_ASSIGN && window.DEPT_ASSIGN[subAdminId]) ? window.DEPT_ASSIGN[subAdminId] : [];

            if (items.length) {
                items.forEach(item => addRow(item));
            } else {
                addRow(); // at least one blank row
            }

            $modal.modal('show');
        });

        // add row
        $('#addDeptRowBtn').on('click', function () { addRow(); });

        // remove row
        $rowsWrap.on('click', '.remove-row', function () {
            $(this).closest('.dept-row').remove();
            reindexNames();
            toggleRemoveVisibility();
        });

        function addRow(prefill = null) {
            const frag = tpl.content.cloneNode(true);
            const $frag = $(frag);

            // create unique ids
            const emailId = 'email_' + rowIndex;
            const dashId = 'dashboard_' + rowIndex;

            // name attributes
            $frag.find('.dept-select').attr('name', `departments[${rowIndex}][id]`);

            // email checkbox + label
            $frag.find('.email-checkbox')
                .attr({ id: emailId, name: `departments[${rowIndex}][email]` })
                .val(1);
            $frag.find('.email-label').attr('for', emailId);

            // dashboard checkbox + label
            $frag.find('.dashboard-checkbox')
                .attr({ id: dashId, name: `departments[${rowIndex}][dashboard]` })
                .val(1);
            $frag.find('.dashboard-label').attr('for', dashId);

            // defaults / prefill
            if (prefill) {
                $frag.find('.dept-select').val(prefill.department_id);
                if (prefill.email_allow === '1') { $frag.find('.email-checkbox').prop('checked', true); }
                if (prefill.dashboard_allow === '1') { $frag.find('.dashboard-checkbox').prop('checked', true); }
            } else {
                // match DB default: dashboard_allow '1'
                $frag.find('.dashboard-checkbox').prop('checked', true);
            }

            // append + increment
            $rowsWrap.append($frag);
            rowIndex++;
            toggleRemoveVisibility();
        }

        function reindexNames() {
            rowIndex = 0;
            $rowsWrap.children('.dept-row').each(function () {
                const $row = $(this);
                const emailId = 'email_' + rowIndex;
                const dashId = 'dashboard_' + rowIndex;

                $row.find('.dept-select').attr('name', `departments[${rowIndex}][id]`);

                $row.find('.email-checkbox').attr({ id: emailId, name: `departments[${rowIndex}][email]` });
                $row.find('.email-label').attr('for', emailId);

                $row.find('.dashboard-checkbox').attr({ id: dashId, name: `departments[${rowIndex}][dashboard]` });
                $row.find('.dashboard-label').attr('for', dashId);

                rowIndex++;
            });
        }

        function toggleRemoveVisibility() {
            const count = $rowsWrap.children('.dept-row').length;
            $rowsWrap.find('.remove-row').toggle(count > 1);
        }

        // ensure unchecked checkboxes submit 0
        $form.on('submit', function () {
            // guard: require department on each row (browser required should handle, but be safe)
            let ok = true;
            $rowsWrap.find('.dept-select').each(function () {
                if (!$(this).val()) { ok = false; }
            });
            if (!ok) { return; }

            // add hidden 0s for unchecked boxes
            $rowsWrap.find('.dept-row').each(function () {
                const $email = $(this).find('.email-checkbox');
                const $dash = $(this).find('.dashboard-checkbox');

                if (!$email.is(':checked')) {
                    $('<input>').attr({ type: 'hidden', name: $email.attr('name'), value: 0 }).appendTo($form);
                }
                if (!$dash.is(':checked')) {
                    $('<input>').attr({ type: 'hidden', name: $dash.attr('name'), value: 0 }).appendTo($form);
                }
            });
        });
    });
</script>
@stop