@extends('admin.layouts.master')

@section('title', isset($user) ? 'Edit User' : 'Create New User')

@section('content')
<div class="row justify-content-center">
    <div class="col-lg-10">
        <div class="card shadow-lg border-0 rounded-lg">

            <div class="card-header text-white" style="background: linear-gradient(90deg, #1CB5E0, #000851);">
                <h4 class="mb-0" style="float: left">
                    <i class="fa fa-user{{ isset($user) ? '-edit' : '-plus' }} mr-2"></i>
                    {{ isset($user) ? 'Edit User' : 'Create New User' }}
                </h4>
                <a style="float: right" href="{{ route('users.index') }}" class="btn btn-light btn-sm">
                    <i class="fa fa-arrow-left mr-1"></i> Back
                </a>
            </div>

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

                <form action="{{ isset($user) ? route('users.update', $user->id) : route('users.store') }}"
                      method="POST" enctype="multipart/form-data">
                    @csrf
                    @if(isset($user))
                        @method('PUT')
                    @endif

                    <div class="row">

                        <!-- Full Name -->
                        <div class="col-lg-6 mb-3">
                            <label for="name">Full Name*</label>
                            <input type="text" name="name" id="name"
                                   class="form-control form-control-lg shadow-sm"
                                   placeholder="Ex. John Doe"
                                   value="{{ $user->name ?? '' }}" required>
                        </div>

                         <!-- Full Name -->
                        <div class="col-lg-6 mb-3">
                            <label for="name">User Name*</label>
                            <input type="text" name="username" id="username"
                                   class="form-control form-control-lg shadow-sm"
                                   placeholder="Ex. maynuddin"
                                   value="{{ $user->username ?? '' }}" required>
                        </div>

                        <!-- Email -->
                        <div class="col-lg-6 mb-3">
                            <label for="email">Email*</label>
                            <input type="email" name="email" id="email"
                                   class="form-control form-control-lg shadow-sm"
                                   placeholder="Ex. example@gmail.com"
                                   value="{{ $user->email ?? '' }}" required>
                        </div>

                        <!-- Password -->
                        <div class="col-lg-6 mb-3">
                            <label for="password">
                                {{ isset($user) ? 'Password (Leave blank if not changing)' : 'Password* (Min: 6)' }}
                            </label>
                            <input type="password" name="password" id="password"
                                   class="form-control form-control-lg shadow-sm"
                                   placeholder="******" minlength="6"
                                   {{ isset($user) ? '' : 'required' }}>
                        </div>

                        <!-- Phone -->
                        <div class="col-lg-6 mb-3">
                            <label for="phone">Phone</label>
                            <input type="text" name="phone" id="phone"
                                   class="form-control form-control-lg shadow-sm"
                                   placeholder="Ex. 017xxxxxxxx"
                                   value="{{ $user->phone ?? '' }}">
                        </div>

                        <!-- Designation -->
                        <div class="col-lg-6 mb-3">
                            <label for="designation_id">Select Designation*</label>
                            <select name="designation_id" id="designation_id"
                                    class="form-control form-control-lg shadow-sm" required>
                                <option value="">-- Select --</option>
                                @foreach($designations as $key => $item)
                                    <option value="{{ $key }}"
                                        {{ isset($user) && $user->designation_id == $key ? 'selected' : '' }}>
                                        {{ $item }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Image Upload -->
                        <div class="col-lg-6 mb-3">
                            <label for="image">Upload User Image</label>
                            <input type="file" name="image" id="image" class="form-control-file">

                            @if(isset($user) && $user->image)
                                <div class="mt-2">
                                    <img src="{{ asset($user->image) }}"
                                         alt="User Image"
                                         class="rounded-circle border shadow-sm"
                                         width="70" height="70">
                                </div>
                            @endif
                        </div>

                        <!-- Roles -->
                        <div class="col-lg-12 mb-4">
                            <label>Assign Roles*</label>
                            <div class="d-flex flex-wrap mt-2">

                                @foreach ($roles as $role_id => $role_name)
                                    @php
                                        $checked = isset($user) && $user->roles->pluck('id')->contains($role_id);
                                    @endphp
                                    <div class="custom-control custom-switch mr-4 mb-2">
                                        <input type="checkbox"
                                               class="custom-control-input"
                                               id="role_{{ $role_id }}"
                                               name="role_id[]"
                                               value="{{ $role_id }}"
                                               {{ $checked ? 'checked' : '' }}>
                                        <label class="custom-control-label font-weight-bold"
                                               for="role_{{ $role_id }}">{{ $role_name }}</label>
                                    </div>
                                @endforeach

                            </div>
                        </div>

                        <!-- Submit -->
                        <div class="col-lg-3 mb-3">
                            <button type="submit"
                                    class="btn btn-primary btn-lg btn-block shadow-sm">
                                {{ isset($user) ? 'Update User' : 'Save User' }}
                            </button>
                        </div>

                    </div>
                </form>

            </div>
        </div>
    </div>
</div>

@include('components.alert')

<style>
    .card-header h4 { font-weight: 600; }
    .custom-control-label {
        font-weight: 500;
        cursor: pointer;
    }
    .custom-control-input:checked ~ .custom-control-label::before {
        background-color: #007bff;
        border-color: #007bff;
    }
    .form-control-file {
        padding: 6px 12px;
        border-radius: 8px;
        border: 1px solid #ced4da;
    }
</style>
@endsection