@extends('admin.layouts.app')
@section('title', 'Customer Reviews')

@push('styles')

<link rel="stylesheet" href="{{ asset('backend') }}/assets/css/sweetalert2.min.css">

<style>

.preview {
    display: inline-block;
    margin: 10px;
}
.preview img {
    width: 100px;
    height: 100px;
    margin-right: 10px;
}


.form-line.case-input {
	border: 1px solid #8a8a8a;
}

.input-group .input-group-addon {
	padding-left: 10px;
}

.input-group .input-group-addon + .form-line {
	padding-left: 35px;
}

.cus-file {
	padding-left: 6px !important;
}

.bootstrap-select.btn-group.show-tick > .btn {
	border: 1px solid #444 !important;
	padding-left: 10px;
	color: #888;
	font-size: 17px;
	padding-bottom: 0;
	font-weight: 300;
}

.dropdown-toggle::after {
	display: inline-block;
	margin-left: .255em;
	vertical-align: .480em;
	content: "";
	border-top: .3em solid;
	border-right: .3em solid transparent;
	border-bottom: 0;
	border-left: .3em solid transparent;
}



.bootstrap-select > .dropdown-toggle.bs-placeholder, .bootstrap-select > .dropdown-toggle.bs-placeholder:hover, .bootstrap-select > .dropdown-toggle.bs-placeholder:focus, .bootstrap-select > .dropdown-toggle.bs-placeholder:active {
	color: #444;
}

.form-group .form-line.access_info {
	border: 1px solid #424242 !important;
	padding-left: 10px;
}
.btn.btn-primary.btn-lg.custom_btn {
	padding: 10px 15px;
}
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle {
	color: #fff;
	background-color: #0062cc !important;
	border-color: #005cbf;
}


</style>


@endpush


@section('admin_content')

<div class="container-fluid">
    <div class="row clearfix">
        <div class="col-lg-5 col-md-5 col-sm-12 mt-4">
            <div class="card">
                <div class="card-header">
                    <h4 style="display: inline-block"> Create Review</h4>
                </div>
                <div class="body">
                    <form action="{{ route('review.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf

                        <div class="form-group mb-4">
                            <label><b>Name</b></label>
                            <div class="input-group">

                                <span class="input-group-addon"> <i class="material-icons">person</i> </span>
                                <div class="form-line case-input">
                                    <input type="text" class="form-control @error('name') is-invalid @enderror" name="name" placeholder="Enter Name">
                                </div>
                                @error('name')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group mb-4">
                            <label><b>Profession</b></label>
                            <div class="input-group">

                                <span class="input-group-addon"> <i class="material-icons">work</i> </span>
                                <div class="form-line case-input">
                                    <input type="text" class="form-control @error('profession') is-invalid @enderror" name="profession" placeholder="Enter Profession">
                                </div>
                                @error('profession')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group mb-4">
                            <label><b>Description</b></label>
                            <div class="input-group">
                                <div class="form-line case-input">
                                    <textarea style="padding-left: 6px" name="description" class="form-control @error('profession') is-invalid @enderror" rows="4"  placeholder="Enter Description"></textarea>
                                </div>
                                @error('phone')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group">
                            <label><b>Image</b></label>
                            <div class="form-line case-input">

                                <input type="file" class="form-control cus-file @error('image') is-invalid @enderror" name="image"/>
                            </div>
                            @error('image')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>


                        <button type="submit" class="btn btn-raised btn-warning text-white m-t-15 waves-effect right mb-3" style="font-weight: 500"> SAVE </button>


                    </form>
                </div>
            </div>
        </div>

        <div class="col-lg-7 col-md-7 col-sm-12 mt-4">
            <div class="card">
                <div class="card-header">
                    <h4 style="display: inline-block"> All Reviews</h4>
                </div>
                <div class="body">
                    <table class="table table-bordered table-striped table-hover">
                        <thead>
                            <tr>
                                <th>S/N</th>
                                <th>Image</th>
                                <th>Name</th>
                                <th>Profession</th>
                                <th>Action</th>
                            </tr>
                        </thead>

                        <tbody>

                            @foreach ($reviews as $key=> $review)
                            <tr>
                                <td>{{ $key+1 }}</td>
                                <td><img src="{{ asset('uploads/review_gallery/'.$review->image) }}" alt="" width="50"></td>
                                <td>{{ $review->name }}</td>
                                <td>{{ $review->profession }}</td>

                                <td>

                                    {{-- <a href="" class="btn btn-primary btn-sm text-white"><i class="material-icons">visibility</i></a> --}}

                                    <a href="{{ route('review.edit',$review->id) }}" class="btn btn-warning btn-sm text-white"><i class="material-icons">edit</i></a>

                                    <form class="d-inline-block" action="{{ route('review.destroy',$review->id) }}" method="POST">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-danger btn-sm show_confirm"><i class="material-icons">delete</i></button>
                                    </form>
                                </td>
                            </tr>
                            @endforeach

                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
</div>


@endsection

@push('scripts')

<script src="{{ asset('backend') }}/assets/js/sweetalert2.all.min.js"></script>



<script>
    $('.show_confirm').click(function(event){
        let form = $(this).closest('form');
        event.preventDefault();

        Swal.fire({
            title: "Are you sure?",
            text: "You won't be able to revert this!",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#3085d6",
            cancelButtonColor: "#d33",
            confirmButtonText: "Yes, delete it!"
            }).then((result) => {
            if (result.isConfirmed) {
                form.submit();
                Swal.fire({
                title: "Deleted!",
                text: "Your file has been deleted.",
                icon: "success"
                });
            }
            });

    });


</script>



@endpush