@extends("layouts.master")

@section("title")
Department add
@endsection

@section("content")
<div class="page-wrapper">
    <div class="page-content">

        <!--breadcrumb-->
        <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
            <div class="breadcrumb-title pe-3"> <a href="{{ url('dashboard')}}">Home</a> </div>
            <div class="ps-3">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 p-0">
                        <li class="breadcrumb-item " aria-current="page"><a href="{{url('document/list')}}">Department list</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Department add</li>
                    </ol>
                </nav>
            </div>
        </div>

        <div class="row ">
            <div class="col">
                <div class="card radius-10 border-start border-0 border-3 border-success">
                    <div class="card-body">
                        <div class="card-title d-flex align-items-center">
                            <div><i class=" me-1 font-22 text-primary"></i>
                            </div>
                            <h6 class="mb-0 text-dark">Create department</h6>
                        </div>
                        <hr>
                        <form class="row g-3" id="dep_form">
                            <div class="col-lg-12">
                                <label for="" class="form-label">Name</label>
                                <input type="text" class="form-control" required name="name" id="">
                            </div>
                            <div class="col-12">
                                <label for="" class="form-label"> Description</label>
                                <textarea class="form-control" name="description" id=""  placeholder=" description..."
                                    rows="3"></textarea>
                            </div>
                            <div class="col-12">
                                <button type="submit" class="btn btn-success px-5" id="btnSubmit">
                                    <i class="bx bx-loader-circle bx-spin fa-pulse" style="display: none"></i>
                                    Add department
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section("script")
<script>
    $(document).ready(function (e) {
        $("#dep_form").on('submit', (function (e) {
            e.preventDefault();
            $.ajax({
                url: '/api/create-department',
                type: "POST",
                data: new FormData(this),
                dataType: "JSON",
                processData: false,
                contentType: false,
                cache: false,
                beforeSend: function () {
                    $("#btnSubmit").attr('disabled', true);
                    $(".fa-pulse").css('display', 'inline-block');
                },
                complete: function () {
                    $("#btnSubmit").attr('disabled', false);
                    $(".fa-pulse").css('display', 'none');
                },
                success: function (response) {
                    console.log(response);
                    if (response["status"] == "fail") {
                        toastr.error('Failed',response["msg"])
                    } else if (response["status"] == "success") {
                        toastr.success('Success',response["msg"])
                        $("#dep_form")[0].reset();
                    }
                },
                error: function (error) {
                    console.log(error);
                }
            });
        }));
    });

</script>
@endsection