@extends('layouts.dashboard')
@section('content')

<div class="content-wrapper" style="min-height: 241px;">
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                <h1 class="m-0">{{ $title }}</h1>
                </div>
                <div class="col-sm-6">
                </div>
            </div>
        </div>
    </div>

    <section class="content">
        <div class="container-fluid">
            @if(Session::has('msg'))
                <p class="alert {{ Session::get('alert-class', 'alert-info') }}">{{ Session::get('msg') }}</p>
            @endif

            @if($errors->any())
                <div class="alert-danger mb-3 p-2" style="border-radius:3px;">{{ implode('', $errors->all(':message')) }}</div>
            @endif

            <div class="row">
                <div class="col">
                    <div class="card">
                        @if(!empty($admin->id))
                            <form id="add-service-form" method="POST" action="{{ url('user/admin/'.$admin->id) }}">
                        @else
                            <form id="add-service-form" method="POST" action="{{ url('user/admin') }}">
                        @endif
                        
                            <div class="modal-header">
                                <!-- <h5 class="modal-title">Add User</h5> -->
                                </button>
                            </div>
                            <div class="modal-body">
                                {{ csrf_field() }}
                                <div class="mb-3">
                                    <label for="name" class="form-label">Name <span style="color:red;">*</span></label>
                                    <input type="text" name="name" class="form-control" id="name" value="{{ !empty($admin->name) ? $admin->name : ''; }}" >
                                </div>
                                <div class="mb-3">
                                    <label for="icon" class="form-label">Email <span style="color:red;">*</span></label>
                                    <input type="text" name="email" class="form-control" id="icon" value="{{ !empty($admin->email) ? $admin->email : ''; }}">
                                </div>
                                <div class="mb-3">
                                    <label for="description" class="form-label">Phone <span style="color:red;">*</span></label>
                                    <input type="text" name="phone" class="form-control" id="icon" value="{{ !empty($admin->phone) ? $admin->phone : ''; }}">
                                </div>
                                <div class="mb-3">
                                    <label for="icon" class="form-label">Password <span style="color:red;">*</span></label>
                                    <input type="text" name="password" class="form-control" id="icon" minlength="8" required>
                                </div>
                                <div class="mb-3">
                                    <label for="placeholder_description" class="form-label">Is Superadmin <span style="color:red;">*</span></label>
                                    <select class="form-select form-control" name="superadmin" id="superadmin" required>
                                        <option value="">Select</option>
                                        @php
                                            $options = ['1' => 'Yes', '0' => 'No'];

                                            foreach($options as $key => $val){
                                                if(isset($admin->superadmin) && $admin->superadmin == $key){
                                                    $selected = 'selected';
                                                }else{
                                                    $selected = '';
                                                }
                                                echo '<option '.$selected.' value="'.$key.'">'.$val.'</option>';
                                            }
                                        @endphp
                                       
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label for="status" class="form-label">Role<span style="color:red;">*</span></label>
                                    <select class="form-select form-control" name="role_id" id="role" required>
                                        <option value="">Select</option>
                                        @foreach($roles as $key => $role)
                                            @php
                                                if(!empty($admin->role_id) && $admin->role_id == $key){
                                                    $selected = 'selected';
                                                }else{
                                                    $selected = '';
                                                }
                                            @endphp
                                            
                                            <option {{ $selected }} value="{{ $key }}">{{ $role }}</option>
                                        @endforeach
                                    </select>
                                </div> 
                            </div>
                            <div class="modal-footer">
                                <button type="submit" id="addService" class="btn btn-primary">Submit</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    function createService() {

        var serviceName         = $('#add-service-form input[name="name"]').val();
        var serviceIcon         = $('#add-service-form input[name="icon"]').val();
        var serviceDescription  = $('#add-service-form textarea[name="description"]').val();
        var servicePlaceholder  = $('#add-service-form textarea[name="placeholder_description"]').val();
        var serviceStatus       = $('#add-service-form select[name="status"]').val();

        if (!serviceName || serviceName.length < 3) {
            Swal.fire({
                title: 'Validation Error!',
                text: 'Please enter a valid Service Name.',
                icon: 'error',
                confirmButtonText: 'OK',
            }).then(function() {
                // Close the SweetAlert popup
            });
            return false; 
        }
        else if (!serviceIcon || serviceIcon.length < 3) {
            Swal.fire({
                title: 'Validation Error!',
                text: 'Please enter a valid Service Icon Name.',
                icon: 'error',
                confirmButtonText: 'OK',
            }).then(function() {
                // Close the SweetAlert popup
            });
            return false;
        }
        else if (!serviceDescription || serviceDescription.length < 3) {
            Swal.fire({
                title: 'Validation Error!',
                text: 'Please enter a valid Service Description.',
                icon: 'error',
                confirmButtonText: 'OK',
            }).then(function() {
                // Close the SweetAlert popup
            });
            return false;
        }
        else if (!servicePlaceholder || servicePlaceholder.length < 3) {
            Swal.fire({
                title: 'Validation Error!',
                text: 'Please enter a valid Service Placeholder Description.',
                icon: 'error',
                confirmButtonText: 'OK',
            }).then(function() {
                // Close the SweetAlert popup
            });
            return false;
        }
        else if (!serviceStatus) {
            Swal.fire({
                title: 'Validation Error!',
                text: 'Please Select a Service Status.',
                icon: 'error',
                confirmButtonText: 'OK',
            }).then(function() {
                // Close the SweetAlert popup
            });
            return false;
        }

        // If all validations pass, you can submit the form or perform other actions
        return true;
    }
</script>
@endsection