@extends('layouts.dashboard')
@section('content')
<div class="container">    
    <div class="contentbox">
        <div class="contentboxheading"><i class="las la-heartbeat"></i><span id="formStatus">Add New Service</span> 
        <a class="btn btn-primary pull-right mt-2 mr10 btn-form-toggle"><span>Show</span> Form</a>  
        </div>
        <div class="contentboxinner">
            @if (session('success'))
                <div class="alert alert-success">
                    {{ session('success') }}
                </div>
            @endif
            <div class="form-container fhide">
                <form class="row g-3" id="saveservice" >
                    @csrf
                    <input type="hidden"  name="hdn_id" id="hdn_id" readonly>   
                    <div class="alert alert-danger errorMsgUpdt" style="display:none;"></div>
                        <div class="col-md-4">
                            <label for="inputFirstName" class="form-label ml10">Service Name<span style="color:red">*</span></label>
                            <input type="text" class="form-control" id="inputService" name="Name" placeholder="Service Name">
                        </div>
                        <div class="col-4">
                            <label for="ddlCategory" class="form-label ml10">Category<span style="color:red">*</span></label>           
                            <select class="selectpicker" name="category" id="ddlCategory" data-live-search="true">
                                <option value="">Select Category</option>
                                @foreach($category as $key=>$val)
                                    <option value="{{$key}}">{{$val}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-4">
                            <label for="txtDescription" class="form-label ml10"> Description</label>
                            <input type="text" class="form-control" id="txtDescription" name ="Description" placeholder="Description">
                        </div>
                        <div class="text-center">
                            <div class="mt-2 ">
                                <button type="button" id = "addUser" class="btn btn-primary mt-4 mb-4">Submit</button>
                                <button type="button" class="btn btn-primary mt-4 mb-4" type="button" onclick="Javascript:window.location.reload()">Reset</button>
                            </div>
                        </div>
                </form>  
            </div>    
            <div class="row">
                <div class="subheading mt-2">Existing(s) Service Details</div>
                <div class="table-responsive mt-3">
                    <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>Action</th>
                                    <th scope="col">Service Name</th>
                                    <th scope="col">Category</th>
                                    <th scope="col">Description</th>
                                    <th scope="col">Status</th>
                                    <th scope="col">Added By</th>
                                </tr>
                            </thead>
                            <tbody id="ajaxData">@include('services.addService_ajax')</tbody>
                    </table>
                </div>
            </div>
        </div>         
    </div>
</div>
@endsection
@section('footer_scripts')
<script>
    
    $(document).ready(function () {
        setTimeout(function () { 
            $('.alert-success').fadeOut('slow');
        },5000);
        
        $('#addUser').click(function(){
            $.ajax({
                type: 'POST',
                dataType: 'json',
                data: $('#saveservice').serialize(),
                url: APP_URL+"/add-services",
                success: function(res) {
                    var stat= res.status;
                    if(stat == true){    
                        location.reload();
                    }
                    else{
                        $('.errorMsgUpdt').html(res.message).show();
                        setTimeout(function () { $('.errorMsgUpdt').fadeOut('slow'); },5000);
                    }
                },
                error: function(res) {  
                    ajax_error2(res);
                }
            });
        });
    });
</script>
@endsection