@php
    // Edit me $subadmin milega, create me null
    $isEdit = isset($subadmin);
    $loginType = old('login_type', $isEdit ? $subadmin->login_type : 'custom');
	 $locationType = old('location_type', $subadmin->location_type ?? 'all');
@endphp


<div class="row g-3">

    {{-- ================= LOGIN TYPE ================= --}}
    <div class="col-12 mb-3">
        <label class="form-label d-block">Login Type <span class="text-danger">*</span></label>

        @foreach(['facebook' => 'Facebook Login', 'google' => 'Google Login', 'custom' => 'Custom Login'] as $type => $label)
            <div class="form-check form-check-inline">
                <input class="form-check-input login-type"
                       type="radio"
                       name="login_type"
                       value="{{ $type }}"
					   id="{{ $type }}"
                       {{ $loginType === $type ? 'checked' : '' }}>
                <label class="form-check-label" for="{{ $type }}">{{ $label }}</label>
            </div>
        @endforeach
    </div>

    {{-- ================= USERNAME (CUSTOM) ================= --}}
    <div class="col-md-6 mb-3 custom-only">
        <label class="form-label">User Name <span class="text-danger">*</span></label>
        <input type="text"
               name="name"
               class="form-control @error('name') is-invalid @enderror"
               value="{{ old('name', $subadmin->name ?? '') }}">
        @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
    </div>

    {{-- ================= PASSWORD ================= --}}
    <div class="col-md-6 mb-3 custom-only">
        <label class="form-label">
            Password
            @if($isEdit)
                <small class="text-muted">(Leave blank to keep existing)</small>
            @endif
        </label>

        <input type="password"
               id="password"
               name="password"
               class="form-control @error('password') is-invalid @enderror">

        <small class="text-muted">
            Min 8 chars, uppercase, lowercase, number & special char
        </small>

        <div class="progress mt-2" style="height:5px;">
            <div id="passwordStrengthBar" class="progress-bar"></div>
        </div>

        @error('password') <div class="invalid-feedback">{{ $message }}</div> @enderror
    </div>

    {{-- ================= FIRST / LAST NAME ================= --}}
    <div class="col-md-6 mb-3">
        <label class="form-label">First Name <span class="text-danger">*</span></label>
        <input type="text"
               name="first_name"
               class="form-control @error('first_name') is-invalid @enderror"
               value="{{ old('first_name', $subadmin->first_name ?? '') }}">
        @error('first_name') <div class="invalid-feedback">{{ $message }}</div> @enderror
    </div>

    <div class="col-md-6 mb-3">
        <label class="form-label">Last Name <span class="text-danger">*</span></label>
        <input type="text"
               name="last_name"
               class="form-control @error('last_name') is-invalid @enderror"
               value="{{ old('last_name', $subadmin->last_name ?? '') }}">
        @error('last_name') <div class="invalid-feedback">{{ $message }}</div> @enderror
    </div>

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

    {{-- ================= FACEBOOK / GOOGLE EMAIL ================= --}}
    <div class="col-md-6 mb-3 login-field facebook-field d-none">
        <label class="form-label">Facebook Email <span class="text-danger">*</span></label>
        <input type="email"
               name="facebook_email"
               class="form-control"
               value="{{ old('facebook_email', $subadmin->facebook_email ?? '') }}">
    </div>

    <div class="col-md-6 mb-3 login-field google-field d-none">
        <label class="form-label">Google Email <span class="text-danger">*</span></label>
        <input type="email"
               name="google_email"
               class="form-control"
               value="{{ old('google_email', $subadmin->google_email ?? '') }}">
    </div>
	
	{{-- ================= SELECT LOCATION ================= --}}
	
	<div class="col-6 mb-3">
		<label class="form-label d-block">
			Select Location <span class="text-danger">*</span>
		</label>

		<div class="form-check form-check-inline">
			<input class="form-check-input location-type all_location"
				   type="radio"
				   name="location_type"
				   value="all"
				   id="location_all"
				    {{ old('location_type', $subadmin->location_type ?? 'all') === 'all' ? 'checked' : '' }}>
			<label class="form-check-label" for="location_all">
				All Locations
			</label>
		</div>

		<div class="form-check form-check-inline">
			<input class="form-check-input location-type specific_location"
				   type="radio"
				   name="location_type"
				   value="specific"
				   id="location_specific"
				   {{ old('location_type', $subadmin->location_type ?? 'all') === 'specific' ? 'checked' : '' }}>
			<label class="form-check-label" for="location_specific">
				Specific Location
			</label>
		</div>
	</div>

	{{-- ================= LOCATION DROPDOWN ================= --}}
	<!--<div class="col-md-6 mb-3 location-dropdown d-none">
		<label class="form-label">
			Select Location <span class="text-danger">*</span>
		</label>

		<select name="location_id"
				class="form-select @error('location_id') is-invalid @enderror">
			<option value="">-- Select Location --</option>

			@foreach($locations as $location)
				<option value="{{ $location->id }}"
					{{ old('location_id', $subadmin->location_id ?? '') == $location->id ? 'selected' : '' }}>
					{{ $location->name }}
				</option>
			@endforeach
		</select>

		@error('location_id')
			<div class="invalid-feedback">{{ $message }}</div>
		@enderror
	</div> -->
	
	@php
		$selectedLocations = old(
			'location_ids',
			$subadmin->location_ids ?? []
		);
	@endphp
	


	<div class="col-md-6 mb-3 location-dropdown d-none multiselect-dropdown">
		<label class="form-label">
			Select Locations <span class="text-danger">*</span>
		</label>

		<select name="location_ids[]"
				class="form-control selectpicker"
				multiple
				data-live-search="true"
				data-actions-box="true"
				data-selected-text-format="count > 5"
				title="Select Locations">

			@foreach($locations as $location)
				<option value="{{ $location->id }}"
					{{ in_array($location->id, (array)$selectedLocations) ? 'selected' : '' }}>
					{{ $location->name }}
				</option>
			@endforeach

		</select>

		@error('location_ids')
			<div class="text-danger small mt-1">{{ $message }}</div>
		@enderror
	</div>

    {{-- ================= PERMISSIONS ================= --}}
<div class="permission-grid mt-3 user-permissions">

@foreach($permissions as $group => $items)

    @php
        $groupKey = \Illuminate\Support\Str::slug($group);
        $groupedModels = $items->groupBy('permission_model');
        $hasMultipleModels = $groupedModels->count() > 1;

        $groupOpen = false;
    @endphp

    {{-- Check if any permission is ON in group --}}
    @foreach($items as $perm)
        @if($isEdit && $subadmin->can($perm->name))
            @php $groupOpen = true; break; @endphp
        @endif
    @endforeach

    <div class="permission-group mb-4">
        <div class="card shadow-none border">

            {{-- ================= GROUP HEADER ================= --}}
            <div class="card-header bg-body d-flex justify-content-between align-items-center">

                <div style="cursor:pointer"
                     data-bs-toggle="collapse"
                     data-bs-target="#group-{{ $groupKey }}">
                    <h5 class="mb-0">
                        <i class="me-2 fas fa-chevron-right"></i>
                        {{ $group }}
                    </h5>
                </div>

                {{-- GROUP FULL ACCESS --}}
                <div class="form-check form-switch">
                    <input class="form-check-input toggle-group"
                           type="checkbox"
                           data-group="{{ $groupKey }}" style="float: inherit !important;">
                    <label class="form-check-label">Full</label>
                </div>

            </div>

            {{-- GROUP COLLAPSE --}}
            <div id="group-{{ $groupKey }}"
                 class="collapse {{ $groupOpen ? 'show' : '' }}">

                <div class="card-body p-2">

                    {{-- ================= MULTIPLE MODELS ================= --}}
                    @if($hasMultipleModels)

                        @foreach($groupedModels as $model => $modelPermissions)

                            @php
                                $model = $model ?? 'Unknown';
                                $modelKey = $groupKey.'-'.\Illuminate\Support\Str::slug($model);
                                $modelOpen = false;
                            @endphp

                            {{-- Check if model open --}}
                            @foreach($modelPermissions as $perm)
                                @if($isEdit && $subadmin->can($perm->name))
                                    @php $modelOpen = true; break; @endphp
                                @endif
                            @endforeach

                            {{-- MODEL HEADER --}}
                            <div class="d-flex justify-content-between align-items-center
                                        fw-semibold text-muted px-3 py-2 mt-2
                                        border-start border-3 permission-model">

                                <div style="cursor:pointer"
                                     data-bs-toggle="collapse"
                                     data-bs-target="#model-{{ $modelKey }}">
                                   <!-- <i class="me-2 fas fa-chevron-right"></i>-->
                                    {{ $model }}
                                </div>

                                {{-- MODEL FULL ACCESS --}}
                                <div class="form-check form-switch" style="padding-left: 1.5em;">
                                    <input class="form-check-input toggle-model"
                                           type="checkbox"
                                           data-model="{{ $modelKey }}">
                                    <label class="form-check-label">Full</label>
                                </div>

                            </div>

                            {{-- MODEL COLLAPSE --}}
                            <div id="model-{{ $modelKey }}"
                                 class="collapse {{ $modelOpen ? 'show' : '' }}">

                                @foreach($modelPermissions as $permission)

                                    <div class="border rounded p-2 ps-3 mb-2 ms-4 d-flex justify-content-between align-items-center">

                                        <span class="fs-9">
                                            {{ $permission->label }}
                                        </span>

                                        <div class="form-check form-switch">
                                            <input class="form-check-input permission-checkbox
                                                   {{ $groupKey }}
                                                   {{ $modelKey }}"
                                                   type="checkbox"
                                                   name="permissions[]"
                                                   value="{{ $permission->name }}"
                                                   {{ $isEdit && $subadmin->can($permission->name) ? 'checked' : '' }}>
                                        </div>
                                    </div>

                                @endforeach

                            </div>

                        @endforeach

                    @else
                        {{-- DIRECT PERMISSIONS --}}
                        @foreach($items as $permission)

                            <div class="border rounded p-2 ps-3 mb-2 d-flex justify-content-between align-items-center">

                                <span class="fs-9">
                                    {{ $permission->label }}
                                </span>

                                <div class="form-check form-switch">
                                    <input class="form-check-input permission-checkbox {{ $groupKey }}"
                                           type="checkbox"
                                           name="permissions[]"
                                           value="{{ $permission->name }}"
                                           {{ $isEdit && $subadmin->can($permission->name) ? 'checked' : '' }}>
                                </div>
                            </div>

                        @endforeach
                    @endif

                </div>
            </div>

        </div>
    </div>

@endforeach

</div>


</div>

<script>
document.addEventListener('DOMContentLoaded', function () {

    function toggleCollapse(elementId, shouldOpen) {
    let el = document.getElementById(elementId);
    if (!el) return;

    if (shouldOpen) {
        el.classList.add('show');
        el.style.height = 'auto';
    } else {
        el.classList.remove('show');
        el.style.height = '0px';
    }
}

    // ================= GROUP FULL ACCESS =================
    document.querySelectorAll('.toggle-group').forEach(function(toggle){
        toggle.addEventListener('change', function(){

            let groupClass = this.dataset.group;
            let groupId = 'group-' + groupClass;

            // check/uncheck all permissions
            document.querySelectorAll('.' + groupClass).forEach(function(cb){
                cb.checked = toggle.checked;
            });

            // Proper collapse sync
            toggleCollapse(groupId, toggle.checked);
        });
    });


    // ================= MODEL FULL ACCESS =================
    document.querySelectorAll('.toggle-model').forEach(function(toggle){
        toggle.addEventListener('change', function(){

            let modelClass = this.dataset.model;
            let modelId = 'model-' + modelClass;

            // check/uncheck permissions
            document.querySelectorAll('.' + modelClass).forEach(function(cb){
                cb.checked = toggle.checked;
            });

            // Proper collapse sync
            toggleCollapse(modelId, toggle.checked);
        });
    });


    // ================= ARROW ROTATION FIX =================
    document.addEventListener('shown.bs.collapse', function (e) {
        let header = e.target.previousElementSibling;
        if(header){
            let icon = header.querySelector('i');
            if(icon) icon.style.transform = "rotate(90deg)";
        }
    });

    document.addEventListener('hidden.bs.collapse', function (e) {
        let header = e.target.previousElementSibling;
        if(header){
            let icon = header.querySelector('i');
            if(icon) icon.style.transform = "rotate(0deg)";
        }
    });

});
</script>
<style>
.permission-group {
    transition: none !important;
}

.collapse {
    transition: height .25s ease;
}

.card-header {
    min-height: 55px;
}

.permission-model {
    min-height: 45px;
}

.collapse {
    transition: none !important;
}

.collapsing {
    transition: none !important;
}

.permission-group {
    transition: none !important;
}

.card-header,
.permission-model {
    min-height: 50px;
}

/*.permission-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: start;   /* IMPORTANT */
}*/
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {

    /* ================= GROUP FULL ACCESS (SINGLE MODEL) ================= */
    document.querySelectorAll('.toggle-group').forEach(toggle => {
        const group = toggle.dataset.group;
        const boxes = document.querySelectorAll('.permission-checkbox.' + group);

        toggle.checked = [...boxes].every(cb => cb.checked);

        toggle.addEventListener('change', function () {
            boxes.forEach(cb => cb.checked = this.checked);
        });

        boxes.forEach(cb => {
            cb.addEventListener('change', function () {
                toggle.checked = [...boxes].every(c => c.checked);
            });
        });
    });

    /* ================= MODEL FULL ACCESS ================= */
    document.querySelectorAll('.toggle-model').forEach(toggle => {
        const model = toggle.dataset.model;
        const boxes = document.querySelectorAll('.permission-checkbox.' + model);

        toggle.checked = [...boxes].every(cb => cb.checked);

        toggle.addEventListener('change', function () {
            boxes.forEach(cb => cb.checked = this.checked);
        });

        boxes.forEach(cb => {
            cb.addEventListener('change', function () {
                toggle.checked = [...boxes].every(c => c.checked);
            });
        });
    });

});
</script>


<script>
function toggleLoginFields(type) {

    // Hide all conditional fields
    document.querySelectorAll('.facebook-field, .google-field, .custom-only')
        .forEach(el => el.classList.add('d-none'));

    // Facebook
    if (type === 'facebook') {
        document.querySelector('.facebook-field').classList.remove('d-none');
    }

    // Google
    if (type === 'google') {
        document.querySelector('.google-field').classList.remove('d-none');
    }

    // Custom
    if (type === 'custom') {
        document.querySelectorAll('.custom-only')
            .forEach(el => el.classList.remove('d-none'));
    }
}

document.querySelectorAll('.login-type').forEach(radio => {
    radio.addEventListener('change', function () {
        toggleLoginFields(this.value);
    });
});

// On page load (edit case)
toggleLoginFields("{{ $loginType }}");
</script>

<script>
document.addEventListener('DOMContentLoaded', function () {

    // 🔁 For each group toggle
    document.querySelectorAll('.toggle-group').forEach(toggle => {
        const group = toggle.dataset.group;
        const checkboxes = document.querySelectorAll('.permission-checkbox.' + group);

        // ✅ INITIAL LOAD CHECK
        const allChecked = Array.from(checkboxes).every(cb => cb.checked);
        toggle.checked = allChecked;

        // 🔄 WHEN FULL ACCESS TOGGLED
        toggle.addEventListener('change', function () {
            checkboxes.forEach(cb => cb.checked = this.checked);
        });

        // 🔄 WHEN INDIVIDUAL PERMISSION TOGGLED
        checkboxes.forEach(cb => {
            cb.addEventListener('change', function () {
                const allCheckedNow = Array.from(checkboxes).every(c => c.checked);
                toggle.checked = allCheckedNow;
            });
        });
    });

});
</script>
<script>
const passwordInput = document.getElementById('password');
const strengthBar = document.getElementById('passwordStrengthBar');

if (passwordInput) {
    passwordInput.addEventListener('input', function () {

        const value = this.value;
        let strength = 0;

        // Reset if empty
        if (value.length === 0) {
            strengthBar.style.width = '0%';
            strengthBar.className = 'progress-bar';
            return;
        }

        if (value.length >= 8) strength++;
        if (/[A-Z]/.test(value)) strength++;
        if (/[a-z]/.test(value)) strength++;
        if (/\d/.test(value)) strength++;
        if (/[@$!%*#?&]/.test(value)) strength++;

        strengthBar.className = 'progress-bar';

        if (strength <= 2) {
            strengthBar.style.width = '30%';
            strengthBar.classList.add('bg-danger');
        } else if (strength <= 4) {
            strengthBar.style.width = '60%';
            strengthBar.classList.add('bg-warning');
        } else {
            strengthBar.style.width = '100%';
            strengthBar.classList.add('bg-success');
        }
    });
}
</script>


@push('scripts')


<script>
let locationPickerInitialized = false;

function toggleLocationDropdown(type) {
    const dropdown = document.querySelector('.location-dropdown');
    if (!dropdown) return;

    if (type === 'specific') {
        dropdown.classList.remove('d-none');

        // ✅ init ONLY ONCE and ONLY when visible
        if (!locationPickerInitialized) {
            $('.selectpicker').selectpicker();
            locationPickerInitialized = true;
        } else {
            $('.selectpicker').selectpicker();
        }

    } else {
        dropdown.classList.add('d-none');
    }
}

document.addEventListener('DOMContentLoaded', function () {

    const checkedRadio = document.querySelector('.location-type:checked');
    if (checkedRadio) {
        toggleLocationDropdown(checkedRadio.value);
    }

    document.querySelectorAll('.location-type').forEach(radio => {
        radio.addEventListener('change', function () {
            toggleLocationDropdown(this.value);
        });
    });

});
</script>



@endpush