@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">

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

            @php
                $groupKey = \Illuminate\Support\Str::slug($group);
                $hasMultiple = $items->count() > 1;
            @endphp

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

                    <div class="card-header bg-body d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">{{ $group }}</h5>

                        @if($hasMultiple)
                            <div class="form-check form-switch">
                                <input class="form-check-input toggle-group"
                                       type="checkbox"
                                       data-group="{{ $groupKey }}">
                                <label class="form-check-label">Full Access</label>
                            </div>
                        @endif
                    </div>

                    <div class="card-body">
                        @foreach($items as $permission)
                            <div class="border rounded p-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
                    </div>

                </div>
            </div>

        @endforeach

    </div>

</div>



<script>
document.querySelectorAll('.toggle-group').forEach(toggle => {
    toggle.addEventListener('change', function () {
        const group = this.dataset.group;
        document.querySelectorAll('.' + group).forEach(cb => {
            cb.checked = this.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('refresh');
        }

    } 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