@extends('backend.layouts.app')
@section('title', (request('member_type') ?? 'Member') . ' List')


@push('style')
    <style>
        .wrap {
            white-space: normal !important;
            word-wrap: break-word;
        }

        .profile-img {
            width: 70px;
            height: 70px;
            object-fit: cover;
            border-radius: 8px;
            border: 2px solid #ddd;
        }
    </style>
@endpush

@section('content')
    <div class="row mb-3">
        <div class="col-12">
            <div class="card">

                <div class="card-body">
                    <h5 class="card-header mb-1">{{ request('member_type') }} List</h5>
                    <div class="row mb-3">
                        <div class="col-sm-12 d-flex justify-content-end gap-2">
                            <a class="btn btn-primary mb-2"
                                href="{{ route('admin.members.create', ['member_type' => request('member_type')]) }}">
                                <i class="bx bx-plus"></i> Add New {{ request('member_type') }}
                            </a>
                        </div>
                    </div>

                    <form action="{{ route('admin.members.index') }}" method="GET">
                        <div class="row d-flex justify-content-end">

                            <div class="col-auto mb-4 d-flex gap-1">
                                <select class="form-select" name="designation">
                                    <option value="">Designation</option>
                                    @foreach ($designations as $designation)
                                        <option value="{{ $designation->id }}"
                                            {{ request('designation') == $designation->id ? 'selected' : '' }}>
                                            {{ $designation->name }}
                                        </option>
                                    @endforeach
                                </select>

                                @if (request('member_type') == 'Teacher')
                                    <select class="form-select" name="department">
                                        <option value="">Department</option>
                                        @foreach ($departments as $department)
                                            <option value="{{ $department->id }}"
                                                {{ request('department') == $department->id ? 'selected' : '' }}>
                                                {{ $department->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                @endif
                                <select class="form-select" name="member_type" hidden>
                                    <option value="">Type</option>
                                    <option value="Teacher" {{ request('member_type') == 'Teacher' ? 'selected' : '' }}>
                                        Teacher</option>
                                    <option value="Staff" {{ request('member_type') == 'Staff' ? 'selected' : '' }}>Staff
                                    </option>
                                </select>
                                <select class="form-select" name="gender">
                                    <option value="">Gender</option>
                                    <option value="Male" {{ request('gender') == 'Male' ? 'selected' : '' }}>Male
                                    </option>
                                    <option value="Female" {{ request('gender') == 'Female' ? 'selected' : '' }}>Female
                                    </option>
                                    <option value="Other" {{ request('gender') == 'Other' ? 'selected' : '' }}>Other
                                    </option>
                                </select>
                                @php $bloodGroups = ['A+','A-','B+','B-','O+','O-','AB+','AB-']; @endphp
                                <select class="form-select" name="blood_group">
                                    <option value="">Blood Group</option>
                                    @foreach ($bloodGroups as $bg)
                                        <option value="{{ $bg }}"
                                            {{ request('blood_group') == $bg ? 'selected' : '' }}>
                                            {{ $bg }}
                                        </option>
                                    @endforeach
                                </select>

                                <input class="form-control" type="text" placeholder="Search" name="search"
                                    value="{{ request('search') }}">
                                <button type="submit" class="btn badge bg-label-primary">
                                    <i class="bx bx-search align-middle"></i>
                                </button>
                            </div>

                        </div>
                    </form>

                    <div class="table-responsive text-nowrap">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Photo</th>
                                    <th>Name</th>
                                    <th>Designation</th>
                                    <th>Department</th>
                                    @if (request('member_type') == 'Teacher')
                                        <th>Order</th>
                                    @endif
                                    <th>Status</th>
                                    @if (request('member_type') == 'Teacher')
                                        <th>Show on Top</th>
                                    @endif
                                    <th>Actions</th>
                                </tr>
                            </thead>

                            <tbody>
                                @foreach ($members as $index => $member)
                                    <tr>
                                        <td class="wrap">{{ $members->firstItem() + $index }}</td>
                                        <td class="wrap"><img src="{{ asset($member->photo) }}" class="profile-img"></td>
                                        <td class="wrap">{{ $member->name }}</td>
                                        <td class="wrap">{{ $member->designation->name ?? '-' }}</td>
                                        <td class="wrap">{{ $member->department->name ?? '-' }}</td>
                                        @if (request('member_type') == 'Teacher')
                                            <td>
                                                <form action="{{ route('admin.member.sort.order', $member->id) }}"
                                                    method="POST" class="orderForm">
                                                    @csrf

                                                    <select name="sort_order"
                                                        class="form-select form-select-sm sortOrderSelect">
                                                        <option value="{{ $member->current_order }}" selected
                                                            style="background:#cce5ff; font-weight:bold;">
                                                            {{ $member->current_order }} (Current)
                                                        </option>
                                                        @foreach (range(1, $member->max_order ?? count($member->available_orders) + count($member->used_orders)) as $num)
                                                            @if ($num == $member->current_order)
                                                                @continue
                                                            @endif
                                                            @if (in_array($num, $member->used_orders))
                                                                <option value="{{ $num }}"
                                                                    style="background:#ffdddd; color:#000;">
                                                                    {{ $num }} (Used)
                                                                </option>
                                                            @else
                                                                <option value="{{ $num }}"
                                                                    style="background:#eaffea;">
                                                                    {{ $num }} (Available)
                                                                </option>
                                                            @endif
                                                        @endforeach
                                                    </select>
                                                </form>
                                            </td>
                                        @endif

                                        <td class="wrap">
                                            <label class="switch switch-success">
                                                <input class="switch-input toggle-class-status" type="checkbox"
                                                    data-id="{{ $member->id }}"
                                                    {{ $member->is_active ? 'checked' : '' }}>
                                                <span class="switch-toggle-slider">
                                                    <span class="switch-on"><i class="bx bx-check"></i></span>
                                                    <span class="switch-off"><i class="bx bx-x"></i></span>
                                                </span>
                                            </label>
                                        </td>
                                        @if (request('member_type') == 'Teacher')
                                            <td class="wrap">
                                                <label class="switch switch-success">
                                                    <input class="switch-input toggle-class-show-on-top" type="checkbox"
                                                        data-id="{{ $member->id }}"
                                                        {{ $member->always_on_top ? 'checked' : '' }}>
                                                    <span class="switch-toggle-slider">
                                                        <span class="switch-on"><i class="bx bx-check"></i></span>
                                                        <span class="switch-off"><i class="bx bx-x"></i></span>
                                                    </span>
                                                </label>
                                            </td>
                                        @endif


                                        <td>
                                            <button class="btn btn-sm btn-info viewBtn"
                                                data-member="{{ json_encode($member) }}">
                                                <i class="bx bx-show"></i>
                                            </button>

                                            <a href="{{ route('admin.members.edit', [$member->id, 'member_type' => request('member_type')]) }}"
                                                class="btn btn-sm btn-warning">
                                                <i class="bx bx-edit-alt"></i>
                                            </a>

                                            <form action="{{ route('admin.members.destroy', $member->id) }}" method="POST"
                                                class="d-inline show_confirm">
                                                @csrf @method('DELETE')
                                                <button class="btn btn-sm btn-danger">
                                                    <i class="bx bx-trash"></i>
                                                </button>
                                            </form>
                                        </td>

                                    </tr>
                                @endforeach
                            </tbody>

                        </table>
                    </div>

                    <div class="mt-2">
                        {{ $members->links() }}
                    </div>

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

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

                <div class="modal-header">
                    <h5 class="modal-title">Member Details</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

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

            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        $(document).on('click', '.viewBtn', function() {
            let data = $(this).data('member');
            let joiningDate = data.joining_date ?
                new Date(data.joining_date).toLocaleDateString('en-GB', {
                    day: '2-digit',
                    month: 'short',
                    year: 'numeric'
                }) :
                '';
            let html = `
            <div class="row">
                <div class="col-md-4">
                    <img src="/${data.photo}" class="img-fluid rounded mb-3">
                </div>
                <div class="col-md-8">
                    <h4>${data.name}</h4>
                    <p><strong>Email:</strong> ${data.email}</p>
                    <p><strong>Phone:</strong> ${data.phone}</p>
                    <p><strong>Address:</strong> ${data.address}</p>
                    <p><strong>Qualification:</strong> ${data.qualification}</p>
                    <p><strong>Gender:</strong> ${data.gender}</p>
                    <p><strong>Blood Group:</strong> ${data.blood_group}</p>
                    <p><strong>Member Type:</strong> ${data.member_type}</p>
                    <p><strong>Joining Date:</strong> ${joiningDate}</p>
                    <p>
                        <strong>Status:</strong>
                        ${data.is_active ? '<span class="badge bg-success">Active</span>'
                                         : '<span class="badge bg-danger">Inactive</span>'}
                    </p>
                </div>
            </div>
        `;

            $('#modalContent').html(html);
            $('#memberViewModal').modal('show');
        });

        $(document).on('click', '.show_confirm', function(event) {
            event.preventDefault();
            let form = $(this).closest('form');

            Swal.fire({
                title: 'Are you sure?',
                text: "Delete this member!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Delete'
            }).then((result) => {
                if (result.isConfirmed) form.submit();
            });
        });

        $('.toggle-class-status').change(function() {
            var id = $(this).data('id');
            $.get('/admin/members/status/' + id, function() {
                Swal.fire('Status Updated!', '', 'success');
            });
        });

        $('.toggle-class-show-on-top').change(function() {
            var id = $(this).data('id');
            $.get('/admin/members/show-on-top/' + id, function() {
                Swal.fire('Status Updated!', '', 'success');
            });
        });
        $('.sortOrderSelect').change(function() {
            $(this).closest('form').submit();
        });
    </script>
@endpush