@extends('layouts.admin')
@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="row mt-3 d-flex justify-content-center">
            <div class="col-12 col-lg-8">
                <div class="card shadow">
                    <div class="card-header">
                        <h2 class="text-center">{{ $data ? 'Update' : 'Create' }} User</h2>
                    </div>
                    <div class="card-body">
                        @if (session('success'))
                            <div class="alert alert-success">
                                {{ session('success') }}
                            </div>
                        @endif
                        @if (session('error'))
                            <div class="alert alert-danger">
                                {{ session('error') }}
                            </div>
                        @endif
                        <form action="{{ $data ? route('users.update') : route('users.store') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <input type="text" name="edit_id" value="{{ $data ? $data->id : '' }}" hidden>
                            <div class="row">
                                <div class="col-12 col-lg-6">
                                    <div class="form-group mt-0">
                                        <label for="name">Name</label>
                                        <input type="text" class="form-control p-2" id="name" name="name"
                                            value="{{ $data ? $data->name : '' }}" required>
                                        @error('name')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-12 col-lg-6">
                                    <div class="form-group mt-0">
                                        <label for="email">Email</label>
                                        <input type="email" class="form-control p-2" id="email" name="email"
                                            value="{{ $data ? $data->email : '' }}" {{ $data ? 'readonly' : 'required' }}>
                                        @error('email')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>

                                @if(!$data)
                                <div class="col-12 col-lg-6">
                                    <div class="form-group mt-3">
                                        <label for="password">Password</label>
                                        <input type="password" class="form-control p-2" id="password" name="password"
                                            required>
                                        @error('password')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                @else

                                @endif

                                <div class="col-12 col-lg-6">
                                    <div class="form-group mt-3">
                                        <label for="role">Role</label>
                                        <select class="form-control p-2" name="role" id="role" required>
                                            <option value="admin" {{ $data && $data->role == 'admin' ? 'selected' : '' }}>Admin</option>
                                            <option value="user" {{ $data && $data->role == 'user' ? 'selected' : '' }}>User</option>

                                        </select>
                                        @error('role')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-12 col-lg-6">
                                    <div class="form-group mt-3">
                                        <label for="gender">Gender</label>
                                        <select class="form-control p-2" name="gender" id="gender" required>
                                            <option value="male" {{ $data && $data->gender == 'male' ? 'selected' : '' }}>Male</option>
                                            <option value="female" {{ $data && $data->gender == 'female' ? 'selected' : '' }}>Female</option>
                                            <option value="other" {{ $data && $data->gender == 'other' ? 'selected' : '' }}>Other</option>
                                        </select>
                                        @error('gender')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-12 col-lg-6">
                                    <div class="form-group mt-3">
                                        <label for="country">Country</label>
                                        <input type="text" class="form-control p-2" id="country" name="country"
                                            value="{{ $data ? $data->country : '' }}" required>
                                        @error('country')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-12 col-lg-6">
                                    <div class="form-group mt-3">
                                        <label for="phone">Phone</label>
                                        <input type="text" class="form-control p-2" id="phone" name="phone"
                                            value="{{ $data ? $data->phone : '' }}" required>
                                        @error('phone')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="form-group mt-3">
                                        <label for="image">Profile Image</label>
                                        <input type="file" class="form-control p-2" id="image" name="image"
                                            {{ $data ? '' : 'required' }} accept="image/jpeg,image/png,image/jpg">
                                        @error('image')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <button type="submit" class="btn btn-lg mt-3"
                                style="background-color: #DE3996; color: #fff">Save</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function () {
        $('form').on('submit', function (e) {
            e.preventDefault();

            let formData = new FormData(this);
            let actionUrl = $(this).attr('action');
            let $form = $(this);

            $.ajax({
                url: actionUrl,
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function (response) {
                    $('.alert').remove();
                    $('<div class="alert alert-success">User saved successfully!</div>').insertBefore('form');
                    if(!$('input[name="edit_id"]').val()) {
                        $form[0].reset();
                    }
                },
                error: function (xhr) {
                    $('.alert').remove();
                    $('.text-danger').remove();

                    if (xhr.status === 422) {
                        let errors = xhr.responseJSON.errors;
                        for (let key in errors) {
                            let field = $('[name="' + key + '"]');
                            field.after('<span class="text-danger">' + errors[key][0] + '</span>');
                        }
                    } else {
                        $('<div class="alert alert-danger">Something went wrong!</div>').insertBefore('form');
                    }
                }
            });
        });
    });
</script>