@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">
                <a href="{{ url('/services') }}" class="btn btn-success float-right">All Services</a>
                </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

            <div class="row">
                <div class="col">
                    <div class="card">
                        <form id="add-service-form" name="updateService" method="POST" action="{{ url('/store-service') }}" onsubmit="return createService();">
                            <div class="modal-header">
                                <h5 class="modal-title">Add Service</h5>
                                </button>
                            </div>
                            <div class="modal-body">
                                {{ csrf_field() }}
                                <div class="mb-3">
                                    <label for="name" class="form-label">Service Name <span style="color:red;">*</span></label>
                                    <input type="text" name="name" class="form-control" id="name" placeholder="eg.Food and Catering">
                                </div>
                                <div class="mb-3">
                                    <label for="icon" class="form-label">Icon Name <span style="color:red;">*</span></label>
                                    <input type="text" name="icon" class="form-control" id="icon" placeholder="eg.catering.svg">
                                </div>
                                <div class="mb-3">
                                    <label for="description" class="form-label">Service Description <span style="color:red;">*</span></label>
                                    <textarea class="form-control" name="description" id="description" rows="3"></textarea>
                                </div>
                                <div class="mb-3">
                                    <label for="placeholder_description" class="form-label">Placeholder Description <span style="color:red;">*</span></label>
                                    <textarea class="form-control" name="placeholder_description" id="placeholder_description" rows="3"></textarea>
                                </div>
                                <div class="mb-3">
                                    <label for="status" class="form-label">Status <span style="color:red;">*</span></label>
                                    <select class="form-select form-control" name="status" id="status">
                                        <option value="1">Active</option>
                                        <option value="0">Inactive</option>
                                    </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