@extends('layouts.default', ['appTopMenu' => true])

@section('title', 'Add Clerk')

@push('head')
<!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="/assets/plugins/datatables.net-bs5/css/dataTables.bootstrap5.min.css" rel="stylesheet" />
<link href="/assets/plugins/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css" rel="stylesheet" />
<script src="/assets/plugins/datatables.net/js/jquery.dataTables.min.js" defer></script>
<script src="/assets/plugins/datatables.net-bs5/js/dataTables.bootstrap5.min.js" defer></script>
<script src="/assets/plugins/datatables.net-responsive/js/dataTables.responsive.min.js" defer></script>
<link href="/assets/plugins/bootstrap-datepicker/dist/css/bootstrap-datepicker.css" rel="stylesheet" />
<script src="/assets/plugins/bootstrap-datepicker/dist/js/bootstrap-datepicker.js" defer></script>
<link href="/assets/plugins/select2/dist/css/select2.min.css" rel="stylesheet" />
<script src="/assets/plugins/select2/dist/js/select2.min.js"></script>
<script src="/assets/plugins/sweetalert/dist/sweetalert.min.js"></script> -->

<script src="/assets/plugins/sweetalert/dist/sweetalert.min.js"></script>
<!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> -->

<link href="/assets/plugins/datatables.net-bs5/css/dataTables.bootstrap5.min.css" rel="stylesheet" />
<link href="/assets/plugins/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css" rel="stylesheet" />
<script src="/assets/plugins/datatables.net/js/jquery.dataTables.min.js" defer></script>
<script src="/assets/plugins/datatables.net-bs5/js/dataTables.bootstrap5.min.js" defer></script>
<script src="/assets/plugins/datatables.net-responsive/js/dataTables.responsive.min.js" defer></script>

<link href="/assets/plugins/bootstrap-datepicker/dist/css/bootstrap-datepicker.css" rel="stylesheet" />
<script src="/assets/plugins/bootstrap-datepicker/dist/js/bootstrap-datepicker.js" defer></script>
<link href="../assets/plugins/select2/dist/css/select2.min.css" rel="stylesheet" />
<script src="../assets/plugins/select2/dist/js/select2.min.js" defer></script>
<!-- <script src="/assets/plugins/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js"></script> -->

<style>
/*Custom CSS*/
span {
    transition: color 0.5s ease-in;
}

label:focus-within span {
    color: blue;
}

input {
    display: block;
    width: 100%;
}

label,
select {

    display: block;
    width: 100%;
    max-width: 100%;
}

/*Profile Pic Start*/
.picture-container {
    position: relative;
    cursor: pointer;
    text-align: center;
}

.picture {
    width: 106px;
    height: 106px;
    background-color: #999999;
    border: 4px solid #CCCCCC;
    color: #FFFFFF;
    border-radius: 50%;
    margin: 0px auto;
    overflow: hidden;
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
}

.picture:hover {
    border-color: #2ca8ff;
}

.picture input[type="file"] {
    cursor: pointer;
    display: block;
    height: 100%;
    left: 0;
    opacity: 0 !important;
    position: absolute;
    top: 0;
    width: 100%;
}

.picture-src {
    width: 100%;

}

/*Profile Pic End*/
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.select2:focus-within {
    border-color: #6265e4 !important;
    box-shadow: 0 0 5px rgba(98, 101, 228, 1) !important;
}

.form-check-input:checked {
    background-color: #1a1b1c;
    border-color: #fff;
}
</style>
@endpush
@section('content')
<script>
@if(Session::has('success'))

swal("{{Session::get('success')}}").then(function() {
    //window.location = "/project/" + loc;
});

@endif
</script>
<section>
    <div class="row">
        <div class="col-xl-12" id="showdetail">
            <!--  For Case Type and Bench ---->
            <div class="card" data-sortable-id="form-stuff-3">
                <div class="card-header card-bg-color ">
                    My Clerk
                </div>
                <div class="card-body">
                    <table id="data-table-default" class="table table-striped table-bordered align-middle">
                        <thead>
                            <tr style='font-size:12px;'>
                                <th width="1%">S.No.</th>
                                <th>Name</th>
                                <th>Father's Name</th>
                                <th>Address</th>
                                <th>Mobile</th>
                                <th>Email</th>
                                <th width="5%"></th>
                            </tr>
                        </thead>
                        <tbody class="desgdata">
                            @php
                            $sn = 1;
                            foreach($myclerk as $ac){
                            @endphp
                            <tr style='font-size:12px;'>
                                <td>{{ $sn; }}</td>
                                <td>{{ $ac->clerk_name }}</td>
                                <td>{{ $ac->c_father_name }}</td>
                                <td>{{ $ac->c_address }}</td>
                                <td>{{ $ac->c_mobile }}</td>
                                <td>{{ $ac->c_email }}</td>

                                <td>
                                                                    </td>
                            </tr>
                            @php
                            ++$sn;
                            }
                            @endphp
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</section>
<div class="modal" id="myModal">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <b><small class="modal-title" id="modal_heading"></small></b>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <!-- Modal body -->
            <div class="modal-body" id="dv_shw_pdf">


            </div>


            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
            </div>

        </div>
    </div>
</div>
@endsection

@push('scripts')


<script>
$(document).ready(function() {
    $('#data-table-default').DataTable({
        "pageLength": 10,
        responsive: {
            details: false
        }
    });


    /* For download and upload the undertaking */
    $(document).on('click', '.repr', function() {
        var id = $(this).data('id');
        $.ajax({
            url: "/download_upload_undertaking",
            type: 'GET',
            cache: false,
            async: true,
            data: {
                id: id
            },
            beforeSend: function() {
                $('#myModal').modal('show');
                $('#dv_shw_pdf').html(
                    "<div class='text-center'><div class='spinner-border'></div></div>");
            },
            success: function(data, status) {
                //$('#modal_heading').html(heading_data);
                $("#dv_shw_pdf").html(data);

                // $('#data-table-combine').DataTable(options);
            },
            error: function(xhr) {
                alert("Error:" + xhr.status + ' ' + xhr.statusText);
            }
        });
    });

    /* For uploading the photo, sign and id proof */
    $(document).on('click', '.uploaddoc', function() {
        var id = $(this).data('id');
        $.ajax({
            url: "/upload_photo_sign_id",
            type: 'GET',
            cache: false,
            async: true,
            data: {
                id: id
            },
            beforeSend: function() {
                $('#myModal').modal('show');
                $('#dv_shw_pdf').html(
                    "<div class='text-center'><div class='spinner-border'></div></div>");
            },
            success: function(data, status) {
                //$('#modal_heading').html(heading_data);
                $("#dv_shw_pdf").html(data);

                // $('#data-table-combine').DataTable(options);
            },
            error: function(xhr) {
                alert("Error:" + xhr.status + ' ' + xhr.statusText);
            }
        });
    });
});


function downloadfile() {
    
    var path = document.getElementById("path").value;
    window.open(path, '_blank');
}
</script>

@endpush