@extends('layouts.app')

@section('title', 'Add Staff')

@section('content')

<div class="row">

    <div class="col-sm-12">
        <div class="card card-transparent card-block card-stretch card-height border-none mb-4">
            <div class="card-body p-0">
                <h3 class="mb-2">Add Staff</h3>
            </div>
        </div>
    </div>

    <div class="col-lg-12">
        <div class="card card-block card-stretch card-height">

            <div class="card-header d-flex justify-content-between">
                <div class="header-title">
                    <h4 class="card-title">Add New Staff</h4>
                </div>
            </div>

            <div class="card-body">

                {{-- Staff Form --}}
                <form action="{{ route('staff.store') }}" method="POST">

                    @csrf

                    {{-- Personal Information --}}
                    <h5 class="mb-3">Personal Information</h5>

                    <div class="row">

                        {{-- Full Name --}}
                        <div class="col-md-6 form-group">

                            <label for="staffName">
                                Full Name <span class="text-danger">*</span>
                            </label>

                            <input
                                type="text"
                                name="user_name"
                                id="staffName"
                                class="form-control"
                                placeholder="e.g. Saba Ashraf"
                                value="{{ old('user_name') }}"
                                required
                            >

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

                        </div>


                        {{-- Email --}}
                        <div class="col-md-6 form-group">

                            <label for="staffEmail">
                                Email Address <span class="text-danger">*</span>
                            </label>

                            <input
                                type="email"
                                name="user_email"
                                id="staffEmail"
                                class="form-control"
                                placeholder="e.g. saba@gmail.com"
                                value="{{ old('user_email') }}"
                                required
                            >

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

                        </div>

                    </div>


                    <hr class="my-4">


                    {{-- Account Information --}}
                    <h5 class="mb-3">Account Information</h5>

                    <div class="row">

                        {{-- Password --}}
                        <div class="col-md-6 form-group">

                            <label for="staffPassword">
                                Password <span class="text-danger">*</span>
                            </label>

                            <input
                                type="password"
                                name="password"
                                id="staffPassword"
                                class="form-control"
                                placeholder="Enter password"
                                required
                            >

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

                        </div>


                        {{-- Confirm Password --}}
                        <div class="col-md-6 form-group">

                            <label for="staffConfirmPassword">
                                Confirm Password <span class="text-danger">*</span>
                            </label>

                            <input
                                type="password"
                                name="password_confirmation"
                                id="staffConfirmPassword"
                                class="form-control"
                                placeholder="Re-enter password"
                                required
                            >

                        </div>

                    </div>


                    <hr class="my-4">


                    {{-- Role --}}
                    <h5 class="mb-3">Role</h5>

                    <div class="form-group">

                        @foreach($roles as $role)

                            <div class="custom-control custom-radio custom-control-inline">

                                <input
                                    type="radio"
                                    id="role{{ $role->role_id }}"
                                    name="role_id"
                                    value="{{ $role->role_id }}"
                                    class="custom-control-input"
                                    {{ old('role_id') == $role->role_id ? 'checked' : '' }}
                                    required
                                >

                                <label
                                    class="custom-control-label"
                                    for="role{{ $role->role_id }}"
                                >
                                    {{ $role->role_name }}
                                </label>

                            </div>

                        @endforeach

                        @error('role_id')
                            <br>
                            <small class="text-danger">
                                {{ $message }}
                            </small>
                        @enderror

                    </div>


                    <hr class="my-4">


                    {{-- Status --}}
                    <h5 class="mb-3">Status</h5>

                    <div class="form-group">

                        <div class="custom-control custom-radio custom-control-inline">

                            <input
                                type="radio"
                                id="statusActive"
                                name="is_active"
                                value="1"
                                class="custom-control-input"
                                {{ old('is_active', '1') == '1' ? 'checked' : '' }}
                            >

                            <label
                                class="custom-control-label"
                                for="statusActive"
                            >
                                Active
                            </label>

                        </div>


                        <div class="custom-control custom-radio custom-control-inline">

                            <input
                                type="radio"
                                id="statusInactive"
                                name="is_active"
                                value="0"
                                class="custom-control-input"
                                {{ old('is_active') === '0' ? 'checked' : '' }}
                            >

                            <label
                                class="custom-control-label"
                                for="statusInactive"
                            >
                                Inactive
                            </label>

                        </div>

                    </div>


                    {{-- Buttons --}}
                    <div class="d-flex flex-wrap mt-4">

                        <button
                            type="submit"
                            class="btn btn-primary mr-2"
                        >
                            <i class="ri-save-line mr-1"></i>
                            Save Staff
                        </button>

                        <button
                            type="reset"
                            class="btn btn-outline-secondary mr-2"
                        >
                            <i class="ri-refresh-line mr-1"></i>
                            Reset
                        </button>

                        <a
                            href="{{ route('staff.list') }}"
                            class="btn btn-outline-danger"
                        >
                            <i class="ri-close-line mr-1"></i>
                            Cancel
                        </a>

                    </div>

                </form>

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

</div>

@endsection