@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" style="display:none">
        <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" style="display:none">
		<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' : '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"
				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">

@php
use Illuminate\Support\Str;

$isEdit = $isEdit ?? false;

/*
|--------------------------------------------------------------------------
| DEFAULT ACCESS CONFIG
|--------------------------------------------------------------------------
*/
$defaultAccess = [

    // Entire group ON
    'groups' => [
        'settings',
    ],

    // Specific model ON
    'models' => [
        'site-pages-blog',
		'site-pages-faq',
		'site-pages-others',
		'site-pages-pagebuilder',
		'others-location',
		'others-testimonial',
		
    ],

    // Specific permissions ON
    'permissions' => [
        'dashboard.view',
    ]
];


/*
|--------------------------------------------------------------------------
| Count models per group
|--------------------------------------------------------------------------
*/
$groupModelCount = [];

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

    foreach ($items as $p) {
        $model = $p->permission_model ?? 'Unknown';
        $groupModelCount[$group][$model] = true;
    }

    $groupModelCount[$group] = count($groupModelCount[$group]);
}
@endphp



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

@php
    $groupKey = Str::slug($group);
    $hasMultipleModels = ($groupModelCount[$group] ?? 0) > 1;
    $currentModel = null;
	
	$exclude_groups = array('Permissions','Permission Group','Users');
	$exclude_group_models = array('Sub Admin','Product Invoice Template','Rank Testing Template');
@endphp

@if(!in_array($group,$exclude_groups))
<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">

			<h5 class="mb-0">{{ $group }}</h5>

			@if(!$hasMultipleModels)
				<div class="form-check form-switch">
					<input
						type="checkbox"
						class="form-check-input toggle-group"
						data-group="{{ $groupKey }}"
						{{ in_array($groupKey, $defaultAccess['groups']) && !$isEdit ? 'checked' : '' }}
					>
					<label class="form-check-label">Full Access</label>
				</div>
			@endif

		</div>



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

		@foreach($items as $permission)

		@php
			$model = $permission->permission_model ?? 'Unknown';
			$modelKey = $groupKey . '-' . Str::slug($model);

			/*
			|--------------------------------------------------------------------------
			| Default Permission Logic
			|--------------------------------------------------------------------------
			*/

			$isDefault = false;

			if (!$isEdit) {

				if (in_array($groupKey, $defaultAccess['groups'])) {
					$isDefault = true;
				}

				if (in_array($modelKey, $defaultAccess['models'])) {
					$isDefault = true;
				}

				if (in_array($permission->name, $defaultAccess['permissions'])) {
					$isDefault = true;
				}
			}
		@endphp



		{{-- ================= MODEL HEADER ================= --}}
		
		@if(!in_array($model,$exclude_group_models))
			
		@if($hasMultipleModels && $currentModel !== $model)

		<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"
			 style="border-color:#3874ff">

			<span>{{ $model }}</span>

			<div class="form-check form-switch">
				<input
					type="checkbox"
					class="form-check-input toggle-model"
					data-model="{{ $modelKey }}"
					{{ in_array($modelKey, $defaultAccess['models']) && !$isEdit ? 'checked' : '' }}
				>
				<label class="form-check-label">Full Access</label>
			</div>

		</div>

		@php $currentModel = $model; @endphp
		@endif



		{{-- ================= PERMISSION ITEM ================= --}}
		<div class="border rounded p-1 ps-3 mb-1 d-flex justify-content-between align-items-center
			{{ $hasMultipleModels ? 'ms-4' : '' }}">

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

			<div class="form-check form-switch">

				<input
					type="checkbox"
					class="form-check-input permission-checkbox
						   {{ $groupKey }}
						   {{ $hasMultipleModels ? $modelKey : '' }}"
					name="permissions[]"
					value="{{ $permission->name }}"

					{{
						($isEdit && $subadmin->can($permission->name))
						||
						(!$isEdit && $isDefault)
						? 'checked'
						: ''
					}}
				>

			</div>

		</div>

		@endif
		@endforeach

		</div>
		</div>
		</div>
@endif
		@endforeach

</div>


</div>



<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