@extends('layouts.master')

@section('styles')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
@endsection

@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}" />

@php
    $breadcrumbs = [
        ['label' => 'Dashboard', 'url' => route('admin.dashboard')],
        ['label' => 'Admins', 'url' => route('admin.admins.index')],
        ['label' => 'Edit Admin', 'url' => '#', 'active' => true],
    ];
@endphp
<x-ui.breadcrumb :items="$breadcrumbs" title="Edit Admin" />

<div class="card">
    <div class="card-body">
        <form method="POST" action="{{ route('admin.admins.update', $admin->id) }}">
            @csrf
            @method('PUT')

            <div class="row">
                <div class="col-md-6 mb-3">
                    <label class="form-label">Name</label>
                    <input type="text" name="name" value="{{ old('name', $admin->name) }}" class="form-control" required>
                    @error('name') <small class="text-danger">{{ $message }}</small> @enderror
                </div>

                <div class="col-md-6 mb-3">
                    <label class="form-label">Email</label>
                    <input type="email" name="email" value="{{ old('email', $admin->email) }}" class="form-control" required>
                    @error('email') <small class="text-danger">{{ $message }}</small> @enderror
                </div>

                <div class="col-md-6 mb-3">
                    <label class="form-label">New Password (leave blank to keep current)</label>
                    <input type="password" name="password" class="form-control" placeholder="Enter new password">
                    @error('password') <small class="text-danger">{{ $message }}</small> @enderror
                </div>

                <div class="col-md-6 mb-3">
                    <label class="form-label">Confirm Password</label>
                    <input type="password" name="password_confirmation" class="form-control" placeholder="Re-enter password">
                </div>

                <div class="col-md-6 mb-3">
                    <label class="form-label">Status</label>
                    <select name="status" class="form-select">
                        <option value="1" {{ old('status', $admin->status) == 1 ? 'selected' : '' }}>Active</option>
                        <option value="0" {{ old('status', $admin->status) == 0 ? 'selected' : '' }}>Inactive</option>
                    </select>
                </div>

                <div class="col-md-12 mb-3">
                    <label class="form-label">Assign Roles</label>
                    <select name="roles[]" class="form-control select2" multiple>
                        @foreach($roles as $role)
                            <option value="{{ $role->name }}" 
                                {{ in_array($role->name, old('roles', $assigned)) ? 'selected' : '' }}>
                                {{ ucfirst($role->name) }}
                            </option>
                        @endforeach
                    </select>
                    <small class="text-muted">Select one or more roles for this admin.</small>
                </div>

                <x-form.dropzone-image class="mt-3" name="media" id="uploadmedia" placeholder="assets/images/media-placeholder.svg"
                        sizeLabel="200×200 px" label="Admin Profile Image" :preview="asset('uploads/'.$admin->profile)" :required="false" />
            </div>

            <div class="d-flex justify-content-between">
                <a href="{{ route('admin.admins.index') }}" class="btn btn-outline-secondary">Cancel</a>
                <button type="submit" class="btn btn-primary">Update Admin</button>
            </div>
        </form>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
$(document).ready(function(){
    $('.select2').select2({ width: '100%' });
});
</script>
@endsection