@extends('admin.layouts.adminapp')

@section('content')
<div class="page-content">
    <div class="container-fluid">

        <!-- start page title -->
        <div class="row">
            <div class="col-12">
                <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                    <h4 class="mb-sm-0">Desination</h4>
                </div>
            </div>
        </div>
        <!-- end page title -->

        <div class="row">
            <div class="col-xl-8">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title mb-4">Designation List</h4>
                        <div class="table-responsive">
                            <table class="table table-centered mb-0 align-middle table-hover table-nowrap">
                                <thead class="table-light">
                                    <tr>
                                        <th>S#no</th>
                                        <th>Name</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                    </tr>
                                </thead><!-- end thead -->
                                <tbody>
                                    @if ($designations->isNotEmpty())
                                      @foreach ($designations as $key => $designation)
                                      <tr>
                                        <td>{{$key++}}</td>
                                        <td>{{$designation->name}}</td>
                                        <td>
                                          @if ($designation->status == 'Active')
                                            <button class="btn btn-primary btn-sm">Active</button>
                                          @else
                                          <button class="btn btn-primary btn-sm">Inctive</button>
                                          @endif
                                        </td>
                                        <td>
                                            <button class="btn btn-danger btn-sm">Delete</button>
                                            <button class="btn btn-primary btn-sm">Edit</button>
                                        </td>
                                     </tr>
                                      @endforeach
                                    @else
                                      <tr>
                                        <td colspan="4">Record not found</td>
                                      </tr>
                                    @endif


                                </tbody><!-- end tbody -->
                            </table> <!-- end table -->
                        </div>
                    </div><!-- end card -->
                </div><!-- end card -->
            </div>
            <!-- end col -->




            <div class="col-xl-4">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">Create Designation</h4>

                        <form class="Designationform" id="Designationform" method="post">
                            @csrf
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="mb-6">
                                        <label for="validationCustom01" class="form-label">Desgination</label>
                                        <input type="text" class="form-control" name="name" id="name"
                                            placeholder="Desgination">
                                          <span></span>
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="mb-6">
                                    <label class="designation">Status</label>
                                            <select class="form-select" name="desgination" id="desgination"
                                            aria-label="Default select example">
                                                <option value="">Select a status</option>
                                                <option value="Active">Active</option>
                                                <option value="Iactive">Inactive</option>
                                                </select>
                                            <span></span></br>
                                    </div>
                                </div>

                            </div>

                            <div>
                                <button class="btn btn-primary" type="submit" name="submit">Submit</button>
                            </div>
                        </form>
                    </div>
                </div>
                <!-- end card -->
            </div><!-- end col -->
        </div>
        <!-- end row -->
    </div>

</div>
<!-- End Page-content -->
@endsection



{{-- Custom js --}}
@section('customJs')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<script>
$('#Designationform').submit(function(e){
    e.preventDefault();
    var element = $(this);
    $("button[type=submit]").prop('disabled',true);
    $.ajax({
        url:'{{route('dasignation.store')}}',
        type:'post',
        data:element.serializeArray(),
        dataType:'json',
        success: function(response) {
            location.reload();
        $("button[type=submit]").prop('disabled', false);
        if (response["status"] == true) {

        $('#name').removeClass('is-invalid')
            .siblings('span')
            .removeClass('invalid-feedback').html("");

        $('#desgination').removeClass('is-invalid')
            .siblings('span')
            .removeClass('invalid-feedback').html("");
        } else {
        var errors = response['errors'];
        if (errors) {
            if (errors['name']) {
                $('#name').addClass('is-invalid')
                    .siblings('span')
                    .addClass('invalid-feedback').html(errors['name'][0]);
            } else {
                $('#name').removeClass('is-invalid')
                    .siblings('span')
                    .removeClass('invalid-feedback').html("");
            }

            if (errors['desgination']) {
                $('#desgination').addClass('is-invalid')
                    .siblings('span')
                    .addClass('invalid-feedback').html(errors['desgination'][0]);
            } else {
                $('#desgination').removeClass('is-invalid')
                    .siblings('span')
                    .removeClass('invalid-feedback').html("");
            }
        }
    }
},
        error:function(jqXHR,exception){
            console.log("something went wrong");
        }
    });
});

</script>

@endsection