@extends('layouts.app')

@section('styles')
    {{-- Style Here --}}
    <link rel="stylesheet" href="{{ asset('plugins/src/filepond/filepond.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/src/filepond/FilePondPluginImagePreview.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/src/notification/snackbar/snackbar.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/src/sweetalerts2/sweetalerts2.css') }}">

    @vite(['resources/scss/light/plugins/filepond/custom-filepond.scss'])
    @vite(['resources/scss/light/assets/components/tabs.scss'])
    @vite(['resources/scss/light/assets/elements/alert.scss'])
    @vite(['resources/scss/light/plugins/sweetalerts2/custom-sweetalert.scss'])
    @vite(['resources/scss/light/plugins/notification/snackbar/custom-snackbar.scss'])
    @vite(['resources/scss/light/assets/forms/switches.scss'])
    @vite(['resources/scss/light/assets/components/list-group.scss'])
    @vite(['resources/scss/light/assets/users/account-setting.scss'])

    @vite(['resources/scss/dark/plugins/filepond/custom-filepond.scss'])
    @vite(['resources/scss/dark/assets/components/tabs.scss'])
    @vite(['resources/scss/dark/assets/elements/alert.scss'])
    @vite(['resources/scss/dark/plugins/sweetalerts2/custom-sweetalert.scss'])
    @vite(['resources/scss/dark/plugins/notification/snackbar/custom-snackbar.scss'])
    @vite(['resources/scss/dark/assets/forms/switches.scss'])
    @vite(['resources/scss/dark/assets/components/list-group.scss'])
    @vite(['resources/scss/dark/assets/users/account-setting.scss'])
@endsection

@section('content')
    <div class="row layout-top-spacing">
        <div class="col-md-12 mb-4 d-flex justify-content-between align-items-center">
            <h4 class="mb-0">⚙️ Edit User</h4>
            <a href="{{ route('clients.users.index', $client_id) }}" class="btn btn-outline-secondary btn-sm">
                ← Back
            </a>
        </div>

        <!-- Nav Pills -->
        <div class="row mb-3">
            <div class="col-md-12">
                <ul class="nav nav-pills" id="animateLine" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link {{ $activeTab == 'home' ? 'active' : '' }}" id="tab-home"
                            data-bs-toggle="tab" data-bs-target="#tab-home-pane" type="button" role="tab"
                            aria-controls="tab-home-pane" aria-selected="{{ $activeTab == 'home' ? 'true' : 'false' }}">
                            <i class="fas fa-home me-1"></i> Home
                        </button>
                    </li>

                    <li class="nav-item" role="presentation">
                        <button class="nav-link {{ $activeTab == 'privileges' ? 'active' : '' }}" id="tab-privileges"
                            data-bs-toggle="tab" data-bs-target="#tab-privileges-pane" type="button" role="tab"
                            aria-controls="tab-privileges-pane"
                            aria-selected="{{ $activeTab == 'privileges' ? 'true' : 'false' }}">
                            <i class="fas fa-key me-1"></i> Privileges
                        </button>
                    </li>
                </ul>
            </div>
        </div>

        <!-- Tab Content -->
        <div class="tab-content" id="animateLineContent">

            <!-- Home Tab -->
            <div class="tab-pane fade {{ $activeTab == 'home' ? 'show active' : '' }}" id="tab-home-pane" role="tabpanel"
                aria-labelledby="tab-home">
                <div class="card shadow-sm border-0">
                    <div class="card-header bg-primary">
                        <h6 class="mb-0 text-white"><i class="fas fa-user-cog me-1 text-white"></i> User Information</h6>
                    </div>
                    <div class="card-body">
                        <form method="POST"
                            action="{{ isset($user) ? route('clients.users.update', [$client_id, $user->id]) : route('users.store') }}"
                            enctype="multipart/form-data">
                            @csrf
                            @if (isset($user))
                                @method('PUT')
                            @endif

                            <!-- Validation Errors -->
                            @if ($errors->any())
                                <div class="alert alert-danger">
                                    <ul class="mb-0">
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif

                            <div class="row">
                                <!-- Profile Picture -->
                                <div class="col-md-6 mb-3">
                                    <label class="form-label fw-semibold"><i class="fas fa-image me-1"></i> Profile
                                        Picture</label>
                                    <input type="file" class="form-control" name="profile_pic"
                                        accept="image/png, image/jpeg, image/gif" />
                                    @if (isset($user) && $user->profile_pic)
                                        <div class="mt-2">
                                            <img src="{{ asset('storage/' . $user->profile_pic) }}" alt="Profile Picture"
                                                class="img-thumbnail" width="100">
                                        </div>
                                    @endif
                                </div>

                                <!-- First Name -->
                                <div class="col-md-6 mb-3">
                                    <label class="form-label fw-semibold"><i class="fas fa-user me-1"></i> First
                                        Name</label>
                                    <input type="text" class="form-control" name="first_name"
                                        value="{{ old('first_name', $user->first_name ?? '') }}" placeholder="First Name">
                                </div>

                                <!-- Last Name -->
                                <div class="col-md-6 mb-3">
                                    <label class="form-label fw-semibold"><i class="fas fa-user me-1"></i> Last Name</label>
                                    <input type="text" class="form-control" name="last_name"
                                        value="{{ old('last_name', $user->last_name ?? '') }}" placeholder="Last Name">
                                </div>

                                <!-- Email -->
                                <div class="col-md-6 mb-3">
                                    <label class="form-label fw-semibold"><i class="fas fa-envelope me-1"></i> Email</label>
                                    <input type="email" class="form-control" name="email"
                                        value="{{ old('email', $user->email ?? '') }}" placeholder="Email">
                                </div>

                                <!-- Mobile -->
                                <div class="col-md-6 mb-3">
                                    <label class="form-label fw-semibold"><i class="fas fa-phone me-1"></i> Mobile</label>
                                    <input type="text" class="form-control" name="mobile"
                                        value="{{ old('mobile', $user->mobile ?? '') }}" placeholder="Mobile Number">
                                </div>

                                <!-- Status -->
                                <div class="col-md-6 d-flex align-items-center">
                                    <div class="form-check form-switch mt-3">
                                        <input class="form-check-input" type="checkbox" id="isActive" name="is_deleted"
                                            value="0"
                                            {{ old('is_deleted', $user->is_deleted ?? 0) == 0 ? 'checked' : '' }}>
                                        <label class="form-check-label fw-semibold" for="isActive">Active</label>
                                    </div>
                                </div>
                            </div>

                            <!-- Save Button -->
                            <div class="text-end mt-4">
                                <button type="submit" class="btn btn-success">
                                    {{ isset($user) ? '🔄 Update User' : '💾 Save User' }}
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Privileges Tab -->
            <div class="tab-pane fade {{ $activeTab == 'privileges' ? 'show active' : '' }}" id="tab-privileges-pane"
                role="tabpanel" aria-labelledby="tab-privileges">
                <div class="card shadow-sm border-0">
                    <div class="card-header bg-primary">
                        <h6 class="mb-0 text-white"><i class="fas fa-key me-1 text-white"></i> Assign Privileges</h6>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered align-middle">
                                <thead class="table-light">
                                    <tr>
                                        <th>#</th>
                                        <th>Menu</th>
                                        <th class="text-center">Read</th>
                                        <th class="text-center">Write</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($menus as $menu)
                                        <tr>
                                            <td>{{ $loop->iteration }}</td>
                                            <td>{{ $menu['menu_name'] }}</td>
                                            <td class="text-center">
                                                <div class="form-check form-switch d-flex justify-content-center">
                                                    <input class="form-check-input privilege-checkbox" type="checkbox"
                                                        id="read_{{ $menu['id'] }}" data-menu-id="{{ $menu->id }}"
                                                        data-type="read"
                                                        {{ $menu->userPrivileges->first()?->can_read ? 'checked' : '' }}>
                                                </div>
                                            </td>
                                            <td class="text-center">
                                                <div class="form-check form-switch d-flex justify-content-center">
                                                    <input class="form-check-input privilege-checkbox" type="checkbox"
                                                        id="write_{{ $menu['id'] }}"
                                                        data-menu-id="{{ $menu->id }}" data-type="write"
                                                        {{ $menu->userPrivileges->first()?->can_write ? 'checked' : '' }}>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
@endsection

@section('scripts')
    {{-- Scripts Here --}}
    <script src="{{ asset('plugins/src/filepond/filepond.min.js') }}"></script>
    <script src="{{ asset('plugins/src/filepond/FilePondPluginFileValidateType.min.js') }}"></script>
    <script src="{{ asset('plugins/src/filepond/FilePondPluginImageExifOrientation.min.js') }}"></script>
    <script src="{{ asset('plugins/src/filepond/FilePondPluginImagePreview.min.js') }}"></script>
    <script src="{{ asset('plugins/src/filepond/FilePondPluginImageCrop.min.js') }}"></script>
    <script src="{{ asset('plugins/src/filepond/FilePondPluginImageResize.min.js') }}"></script>
    <script src="{{ asset('plugins/src/filepond/FilePondPluginImageTransform.min.js') }}"></script>
    <script src="{{ asset('plugins/src/filepond/filepondPluginFileValidateSize.min.js') }}"></script>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>

    <script src="{{ asset('plugins/src/notification/snackbar/snackbar.min.js') }}"></script>
    <script src="{{ asset('plugins/src/sweetalerts2/sweetalerts2.min.js') }}"></script>

    @vite(['resources/js/users/account-settings.js'])
    <script type="module">
        userProfile.addFiles("{{ Vite::asset('resources/images/user-profile.jpeg') }}");
    </script>
    <script>
        $(document).ready(function() {
            $('.privilege-checkbox').on('change', function() {
                var menuId = $(this).data('menu-id');
                var type = $(this).data('type'); // 'read' or 'write'
                var value = $(this).is(':checked') ? 1 : 0;
                var userId = {{ $user->id }}; // pass current user ID

                $.ajax({
                    url: "{{ route('users.privileges.toggle', ['user' => $user->id]) }}",
                    method: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                        menu_id: menuId,
                        type: type,
                        value: value
                    },
                    success: function(response) {
                        console.log('Privilege updated:', response);
                    },
                    error: function(err) {
                        alert('Error updating privilege.');
                    }
                });
            });
        });
    </script>
@endsection