@extends('layouts.main-layout')

@section('content')
    <!--**********************************
                                        Content body start
                                    ***********************************-->
    <div class="content-body">

        <div class="row page-titles mx-0">
            <div class="col p-md-0">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ url('/') }}">Dashboard</a></li>
                    <li class="breadcrumb-item active"><a href="">Staff List</a></li>
                </ol>
            </div>
        </div>
        <!-- row -->

        <div class="container-fluid">
            <div class="row">
                <div class="col-12">


                    <div class="card">
                        <div class="card-body">
                            <div class="table-responsive">
                                <button class="btn mb-1 btn-primary" data-toggle="modal" data-target="#StaffAddModel">Add
                                    New Staff</button>
                                <h4 class="card-title" style="text-align: -webkit-center;color: slategrey;">Staff List
                                </h4>

                                <table class="table table-striped table-bordered zero-configuration dataTable"
                                    id="example">
                                    <thead>
                                        <tr>
                                            <th>No.</th>
                                            <th>Name</th>
                                            <th>Email</th>
                                            <th>Password</th>
                                            <th>Contact</th>
                                            <th>Company</th>
                                            <th>Admin</th>
                                            <th>Status</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                                                                @foreach ($data as $item)
                                            <tr>
                                                <td>{{ $i }}</td>
                                                <td><a title="Click To view Staff Reports" href="{{ url('staff') }}/{{ $item->id }}/reports" class="label mb-1 label-primary">{{ $item->name }}</a></td>
                                                <td>{{ $item->email }}</td>
                                                <td>{{ $item->password }}</td>
                                                <td>{{ $item->contact }}</td>
                                                <td>{{ $item->company }}</td>
                                                <td><a title="Click Here" href="{{ url('admin') }}/{{ $item->staffAdminID }}/staff" class="label mb-1 label-success">{{ $item->adminName }}</a></td>
                                                {{-- <td>{{ \Carbon\Carbon::parse($item->created_at)->format('m-d-Y') }}</td> --}}
                                                <td>
                                                    @if ($item->status == 1)
                                                        <a title="Click To Inactive/Activate Staff" href="javascript:void(0)"
                                                            class="updateStaffStatus label mb-1 label-success"
                                                            staff_id="{{ $item->id }}"
                                                            id="staff-{{ $item->id }}">Active</a>
                                                    @else
                                                        <a title="Click To Inactive/Activate Staff" href="javascript:void(0)"
                                                            class="updateStaffStatus label mb-1 label-danger"
                                                            staff_id="{{ $item->id }}"
                                                            id="staff-{{ $item->id }}">Inactive</a>
                                                    @endif
                                                </td>
                                                <td>

                                                    <a class="btn-danger btn-sm delete-confirm" data-toggle="tooltip"
                                                        href="{{ url('delete') }}/{{ $item->id }}/staff"><i
                                                            class="fa fa-trash" title="Delete"
                                                            aria-hidden="true"></i></a>&nbsp;
                                                    <a class="btn-success btn-sm edit" id="{{ $item->id }}"
                                                        href="#"><i class="fa fa-edit" title="Edit"
                                                            aria-hidden="true"></i></a>&nbsp;
                                                </td>
                                            </tr>
                                                                                    @endforeach
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <th>No.</th>
                                            <th>Name</th>
                                            <th>Email</th>
                                            <th>Password</th>
                                            <th>Contact</th>
                                            <th>Company</th>
                                            <th>Admin</th>
                                            <th>Date</th>
                                            <th>Action</th>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!-- #/ container -->
    </div>
    </div>

    <!-- #/ container -->
    </div>
    <!--*************   Update Admin Model Starts   **************-->
    <div class="modal fade" id="StaffAddModel" tabindex="-1" role="dialog"
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered term" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Add New Staff </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="javascript:void(0)" id="addStaffForm" name="addStaffForm"
                        class="form-horizontal" method="POST">
                        <div class="form-group">
                            <label>Name</label>
                            <input type="text" class="form-control" id="username" name="username"
                                placeholder=" Name">
                        </div>
                        <div class="form-group">
                            <label>Email</label>
                            <input type="email" class="form-control" id="email" name="email"
                                placeholder="Email">
                        </div>
                        <div class="form-group">
                            <label>Password</label>
                            <input type="email" class="form-control" id="password" name="password"
                                placeholder="Password">
                        </div>
                        <div class="form-group">
                            <label>Company Name</label>
                            <input type="text" class="form-control" id="company" value="Allscape" name="company"
                                placeholder="Allscape">
                        </div>
                        <div class="form-group">
                            <label>Location</label>
                            <input type="text" class="form-control" id="location" name="location"
                                placeholder="Location">
                        </div>
                        <div class="form-group">
                            <label>Contact</label>
                            <input type="number" class="form-control" id="contact" name="contact"
                                placeholder="Contact Number">
                        </div>
                        <div class="form-group">
                            <label>Select Staff Admin</label>
                            <select class="form-control js-example-basic-single-admin" id="staffAdmin" name="staffAdmin" style="width:50%;" >
                                <option></option>
                                @foreach($staffAdmins as $staffAdmin)
                                    <option value="{{$staffAdmin->id}}">{{$staffAdmin->name}}</option>
                                @endforeach
                            </select>
                        </div>
                        
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" id="btn-save">Save</button>
                </div>
            </div>
        </div>
    </div>
    <!--*************   Save Admin Model Ends   **************-->
    <!--*************   Update Admin Model Starts   **************-->
    <div class="modal fade" id="StaffUpdateModel" tabindex="-1" role="dialog"
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered term" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Update Staff </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="javascript:void(0)" id="addStaffForm" name="addStaffForm"
                        class="form-horizontal" method="POST">
                        <div class="form-group">
                            <label>Name</label>
                            <input type="text" class="form-control" id="username-u" name="username"
                                placeholder=" Name">
                        </div>
                        <div class="form-group">
                            <label>Email</label>
                            <input type="email" class="form-control" id="email-u" name="email"
                                placeholder="Email">
                        </div>
                        <div class="form-group">
                            <label>Password</label>
                            <input type="text" class="form-control" id="password-u" name="password-u"
                                placeholder="Enter Password">
                        </div>
                        <div class="form-group">
                            <label>Company Name</label>
                            <input type="text" class="form-control" id="company-u" name="company"
                                placeholder="Email">
                        </div>
                        <div class="form-group">
                            <label>Location</label>
                            <input type="text" class="form-control" id="location-u" name="location"
                                placeholder="Email">
                        </div>
                        <div class="form-group">
                            <label>Contact</label>
                            <input type="number" class="form-control" id="contact-u" name="contact"
                                placeholder="Contact Number">
                            <input type="hidden" class="form-control" id="staffId-u" name="staffId-u"
                                >    
                            
                        </div>
                        <div class="form-group">
                            <label>Select Staff Admin</label>
                            <select class="form-control js-example-basic-single-admin-u" id="staffAdminId-u" name="staffAdminId-u" style="width:50%;" >
                                <option></option>
                                @foreach($staffAdmins as $staffAdmin)
                                    <option value="{{$staffAdmin->id}}">{{$staffAdmin->name}}</option>
                                @endforeach
                            </select>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" id="btn-update">Update</button>
                </div>
            </div>
        </div>
    </div>
    <!--*************   Save Admin Model Ends   **************-->
    <!--**********************************
                                        Content body end
                                    ***********************************-->
    <script>
        $(document).ready(function() {
            toastr.options.timeOut = 10000;
            @if (Session::has('error'))
                toastr.error('{{ Session::get('error') }}');
            @elseif (Session::has('success'))
                toastr.success('{{ Session::get('success') }}');
            @endif
        });
        
    $(document).ready(function() {
        $('.js-example-basic-single-admin').select2({
                placeholder: 'Select Staff Admin',
                selectOnClose: true,
            });
             $('.js-example-basic-single-admin-u').select2({
                placeholder: 'Select Staff Admin',
                selectOnClose: true,
            });
    });   
    
    </script>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.0/sweetalert.min.js"></script>
    <script type="text/javascript">
        toastr.options = {
            "closeButton": true,
            "debug": false,
            "newestOnTop": false,
            "progressBar": true,
            "positionClass": "toast-top-right",
            "preventDuplicates": true,
            "onclick": null,
            "showDuration": "300",
            "hideDuration": "1000",
            "timeOut": "1000",
            "extendedTimeOut": "1000",
            "showEasing": "swing",
            "hideEasing": "linear",
            "showMethod": "fadeIn",
            "hideMethod": "fadeOut"
        }
        $('.delete-confirm').click(function(event) {

            const url = $(this).attr('href');
            event.preventDefault();
            swal({
                    title: `Are you sure you want to delete this record?`,
                    text: "If you delete this, it will be gone forever.",
                    icon: "warning",
                    buttons: true,
                    dangerMode: true,
                })
                .then((willDelete) => {
                    if (willDelete) {
                        window.location.href = url;
                    }
                });
        });
        
         //save admin 
        $('body').on('click', '#btn-save', function(event) {
            if ($.trim($("#username").val()) == "" || $.trim($("#email").val()) == "" || $.trim($("#password").val()) == "" || $.trim($("#staffAdmin").val()) == ""  || $.trim($(
                        "#contact").val()) == "" || $.trim($("#company").val()) == "" || $.trim($("#location").val()) == ""){
                alert("Please Fill All Fields!");
            } else {
                
                    var username = $("#username").val();
                var email = $("#email").val();
                var contact = $("#contact").val();
                var company = $("#company").val();
                var locations = $("#location").val();
                var staffAdminid = $("#staffAdmin").val();
                var password = $("#password").val();
                    $("#btn-save").html('Please Wait...');
                    $("#btn-save").attr("disabled", true);
                    // ajax
                    $.ajax({
                        type: "POST",
                        url: "{{ route('staff.store') }}",
                        data: {
                            _token: "{{ csrf_token() }}",
                            username: username,
                            email: email,
                            contact: contact,
                            password: password,
                            company: company,
                            location: locations,
                            staffAdminid: staffAdminid,
                        },
                        dataType: 'json',
                        success: function(res) {
                            console.log(res)
                            $('#StaffAddModel').modal('hide');
                            //window.location.reload();
                            toastr.success('Staff  Details Saved', 'Hi');
                            $("#btn-save").html('Submit');
                            $("#btn-save").attr("disabled", false);
                            window.setTimeout(function(){location.reload()},3000)
                        },
                        error: function(reject) {
                            if (reject.status === 422) {
                                var errors = $.parseJSON(reject.responseText);
                                $.each(errors, function(key, val) {
                                    $("#" + key + "_error").text(val[0]);

                                });
                                toastr.error('Email or Number already exists', 'Hi');
                                $("#btn-save").html('Submit');
                                $("#btn-save").attr("disabled", false);
                                $('#StaffAddModel').modal('hide');
                            }
                        }
                    });
               
            }
        });
        //update  admin
        $('body').on('click', '#btn-update', function(event) {
            if ($.trim($("#username-u").val()) == "" || $.trim($("#email-u").val()) == "" || $.trim($("#staffAdminId-u").val()) == "" || $.trim($(
                        "#contact-u").val()) == "" || $.trim($("#company-u").val()) == "" || $.trim($("#location-u").val()) == "" || $.trim($("#password-u").val()) == ""){
                alert("Please Fill All Fields!");
            } else {
                var username = $("#username-u").val();
                var email = $("#email-u").val();
                var contact = $("#contact-u").val();
                var company = $("#company-u").val();
                var location = $("#location-u").val();
                var password = $("#password-u").val();
                var id = $("#staffId-u").val();
                var AdminId = $("#staffAdminId-u").val();
                $("#btn-update").html('Please Wait...');
                $("#btn-update").attr("disabled", true);
                // ajax
                $.ajax({
                    type: "POST",
                    url: "{{ route('staff.update') }}",
                    data: {
                        _token: "{{ csrf_token() }}",
                        username: username,
                        email: email,
                        contact: contact,
                        company: company,
                        location: location,
                        password: password,
                        id: id,
                        AdminId: AdminId,
                    },
                    dataType: 'json',
                    success: function(res) {
                        console.log(res)
                        $('#StaffUpdateModel').modal('hide');
                        //window.location.reload();
                        toastr.success('Staff Details Updated', 'Hi');
                        $("#btn-update").html('Update');
                        $("#btn-update").attr("disabled", false);
                        
                        window.location.reload();
                    },
                    error: function(reject) {
                        if (reject.status === 422) {
                            var errors = $.parseJSON(reject.responseText);
                            $.each(errors, function(key, val) {
                                $("#" + key + "_error").text(val[0]);
                            });
                            toastr.error('Email or Number already exists', 'Hi');
                            $("#btn-update").html('Submit');
                            $("#btn-update").attr("disabled", false);
                            $('#StaffUpdateModel').modal('hide');
                        }
                    }
                });
            }
        });

        //update Staff Admin Status Attruibute status
        $(".updateStaffStatus").click(function() {
            var status = $(this).text();
            var staff_id = $(this).attr("staff_id");
            $.ajax({
                type: 'post',
                url: 'staff-status',
                data: {
                    status: status,
                    staff_id: staff_id,
                    _token: '{{ csrf_token() }}'
                },
                success: function(resp) {
                    if (resp['status'] == 0) {
                        $("#staff-" + staff_id).html("Inactive");
                        $("#staff-" + staff_id).removeClass('label-success');
                        $("#staff-" + staff_id).addClass('label-danger');
                    } else if (resp['status'] == 1) {
                        $("#staff-" + staff_id).html("Active");
                        $("#staff-" + staff_id).removeClass('label-danger');
                        $("#staff-" + staff_id).addClass('label-success');
                    }
                },
                error: function() {
                    alert("error");
                }
            });

        });

        $(document).on('click', '.edit', function() {
            var id = $(this).attr("id");
            $('#form_output').html('');
            $.ajax({
                url: "{{ route('staff.fetchdata') }}",
                method: 'get',
                data: {
                    id: id
                },
                dataType: 'json',
                success: function(data) {
                    $('#username-u').val(data.name);
                    $('#email-u').val(data.email);
                    $('#contact-u').val(data.contact);
                    $('#company-u').val(data.company);
                    $('#location-u').val(data.locationn);
                    $('#password-u').val(data.password);
                   //val(id);
                    $('#staffId-u').val(id);
                    $('#staffAdminId-u').val(data.admin_id).trigger('change');
                    $('#StaffUpdateModel').modal('show');
                }
            })
        });
    </script>
@endsection