@extends('layouts.simple.master')

@section('title', 'Default')

@section('css')

@endsection

@section('style')
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/animate.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/datatables.css') }}">
@endsection

@section('breadcrumb-title')
<h3>Staff</h3>
@endsection

@section('breadcrumb-items')
<li class="breadcrumb-item">Staff</li>
@endsection

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-xxl-12 col-xl-12 col-md-12 col-sm-12 box-col-12">
            <div class="card height-equal">
                <div class="card-header card-no-border">
                    <div class="header-top">
                        <h5></h5>
                        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#add_new"><span class="fa fa-plus"></span></button>
                    </div>
                </div>
                <div class="card-body pt-3 pb-5">
                    <div class="product-wrapper-grid">
                        <div class="row">
                            @if (!empty($data))
                            @foreach ($data as $row)
                            <div class="col-xl-3 col-sm-6 xl-4">
                                <div class="card">
                                    <div class="product-box">
                                        <div class="product-img"><img class="img-fluid" @if (!empty($row->image))
                                            src="{{ asset('public/storage/uploads/'.$row->image) }}"
                                            @else
                                            src="{{ asset('assets/dummy_person.jpg') }}"
                                            @endif
                                            alt="">
                                            <div class="product-hover">
                                                <ul>
                                                    <li>
                                                        <button class="btn" type="button" data-bs-toggle="modal" data-bs-target="#update_staff_{{$row->id}}"><i class="fa fa-edit"></i></button>
                                                    </li>
                                                    <li>
                                                        <button type="button" class="btn" onclick="delete_record()"><i class="fa fa-trash"></i></button>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                                                                <div class="modal fade" id="update_staff_{{$row->id}}" tabindex="-1" role="dialog" aria-labelledby="update_staff" aria-hidden="true">
                                            <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
                                                <div class="modal-content">
                                                    <form action="{{route('update.client')}}" method="post" enctype="multipart/form-data">
                                                        @csrf
                                                        <div class="modal-header">
                                                            <div class="product-box row">
                                                                <div class="product-img col-lg-4">
                                                                    <img id="image-preview" class="img-fluid" height="200" width="200" @if (!empty($row->image))
                                                                    src="{{ asset('public/storage/uploads/'.$row->image) }}"
                                                                    @else
                                                                    src="{{ asset('assets/dummy_person.jpg') }}"
                                                                    @endif
                                                                    alt="" style="max-width:60% !important;border:1px solid black">
                                                                    <input type="file" id="image-upload" name="image" style="display: none;" accept="image/*">
                                                                    <h4>Allowed Roles</h4>
                                                                    <div class="col">
                                                                        @if (!empty($permissions))
                                                                        @foreach ($permissions as $val)
                                                                        <label class="d-block m-15" for="chk-ani">
                                                                            <input class="checkbox_animated" id="chk-ani" @if (!empty($allowed_permissions)) @foreach ($allowed_permissions as $al_val) @if ($al_val->user_id == $row->id && $al_val->permission_id == $val->id)
                                                                            @php
                                                                            $permissions_title[]= $val->name;
                                                                            @endphp
                                                                            checked
                                                                            @endif
                                                                            @endforeach
                                                                            @endif
                                                                            value="" name="permissions[]" type="checkbox" data-bs-original-title="" title="">                                                                         </label>
                                                                        @endforeach
                                                                        @endif
                                                                    </div>
                                                                </div>
                                                                <div class="product-details col-lg-8 text-start">
                                                                    <div class="row">
                                                                        <div class="col-md-12 mb-2">
                                                                            <label for="">First Name</label>
                                                                            <input type="text" name="fname" class="form-control" placeholder="First Name" value="">
                                                                            <input type="hidden" name="id" value="">
                                                                            <input type="hidden" name="type" value="">
                                                                        </div>
                                                                        <div class="col-md-12 mb-2">
                                                                            <label for="">Last Name</label>
                                                                            <input type="text" name="lname" class="form-control" placeholder="Last Name" value="">
                                                                        </div>
                                                                        <div class="col-md-12 mb-2">
                                                                            <label for="">Email</label>
                                                                            <input type="email" name="email" class="form-control" placeholder="email@gmail.com" value="">
                                                                        </div>
                                                                        <div class="col-md-12 mb-2">
                                                                            <label for="">Phone Number</label>
                                                                            <input type="text" name="phone_number" class="form-control" value="">
                                                                        </div>
                                                                        <div class="col-md-12 mb-2">
                                                                            <label for="">Designation</label>
                                                                            <input type="text" name="designation" class="form-control" placeholder="Designation" value="">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button class="btn btn-primary" type="button" data-bs-dismiss="modal" data-bs-original-title="" title="">Cancel</button>
                                                            <button class="btn btn-primary" type="submit">Update</button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="product-details" style="text-align:center">
                                            <div class="rating">
                                                <h4>{{$row->fname ." ". $row->lname}}</h4>
                                                </a>
                                                <p>{{$row->designation}}</p>
                                                <p>{{$row->email}}</p>
                                                <p>{{$row->phone_number}}</p>
                                                <h4 class="m-t-10">Roles</h4>
                                                <span class="m-t-10 col-12 col-md-12" style="display:flex;flex-direction: column;">
                                                    <span class="row" >
                                                        @if (!empty($permissions_title))
                                                        @foreach($permissions_title as $prow)
                                                        <span class="col-4 col-md-4 roles m-t-5"></span>
                                                        @endforeach
                                                        @endif
                                                    </span>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="delete_modal" tabindex="-1" role="dialog" aria-labelledby="editmodalLabel" aria-hidden="true">
        <div class="modal-dialog modal-md modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editmodalLabel">Delete</h5>
                    <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close" data-bs-original-title="" title=""></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <p class="txt-danger">Are you sure you want to delete this?</p>
                        <input type="hidden" class="hid_id">
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" type="button" data-bs-dismiss="modal" data-bs-original-title="" title="">No</button>
                    <button class="btn btn-primary" type="button" onclick="delete_record('trash')">Yes</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="add_new" tabindex="-1" role="dialog" aria-labelledby="add_newLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="add_newLabel">Personal Info</h5>
                    <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close" data-bs-original-title="" title=""></button>
                </div>
                <form action="{{ route('add.staff') }}" method="post" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">
                        <div class="row">

                            <div class="col-md-12">
                                <div class="row">
                                    <div class="col-md-12 mb-2">
                                        <label for="">First Name</label>
                                        <input type="text" name="fname" class="form-control" placeholder="First Name">
                                        <input type="hidden" name="type" value="3">
                                        <input type="hidden" name="role" value="3">
                                    </div>
                                    <div class="col-md-12 mb-2">
                                        <label for="">Last Name</label>
                                        <input type="text" name="lname" class="form-control" placeholder="Last Name">
                                    </div>
                                    <div class="col-md-12 mb-2">
                                        <label for="">Email</label>
                                        <input type="email" name="email" class="form-control" placeholder="email@gmail.com">
                                    </div>
                                    <div class="col-md-12 mb-2">
                                        <label for="">Phone Number</label>
                                        <input type="text" name="phone_number" class="form-control">
                                    </div>
                                    <div class="col-md-12 mb-2">
                                        <label for="">Designation</label>
                                        <input type="text" name="designation" class="form-control" placeholder="Designation">
                                    </div>
                                    <div class="col-sm-12">
                                        <label for="">Select Image</label>
                                        <input type="file" name="image" class="form-control">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12 mt-3">
                                <h4>Roles</h4>
                                <div class="row">
                                    @if (!empty($permissions))
                                    @foreach ($permissions as $val)
                                    <div class="col-md-4 col-6">
                                        <label class="d-block m-15" for="chk-ani">
                                            <input class="checkbox_animated" id="chk-ani" value="" name="permissions[]" type="checkbox" data-bs-original-title="" title="">                                         </label>
                                    </div>
                                    @endforeach
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-primary" type="button" data-bs-dismiss="modal" data-bs-original-title="" title="">Cancel</button>
                        <button class="btn btn-primary" type="submit">Add</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    @endsection

    @section('script')
    <script src="{{ asset('assets/js/datatable/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/js/datatable/datatables/datatable.custom.js') }}"></script>
    <script>
        $(document).ready(function() {
            $('#image-preview').on('click', function() {
                $('#image-upload').click();
            });

            $('#image-upload').on('change', function(event) {
                const [file] = event.target.files;
                if (file) {
                    $('#image-preview').attr('src', URL.createObjectURL(file));
                }
            });
        });

        function delete_record(obj) {
            if (obj == 'trash') {
                $('#delete_modal').modal('hide');
                var id = $('#delete_modal').find('.hid_id').val();
                $('#delete_modal').find('.hid_id').val('');
                $.ajax({
                    url: "{{ route('delete.client') }}",
                    type: 'POST',
                    data: {
                        id: id,
                        trash: 1,
                    },
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        $('button[onclick="delete_record(' + id + ')"]').closest('tr').remove();
                        location.reload();

                    }
                });
            } else {
                $('#delete_modal').modal('show');
                $('#delete_modal').find('.hid_id').val(obj);
            }
        }
    </script>
    @endsection