@extends('layouts.master')
@section('content')
    <div class="row">

        <div class="col-md-12 p-3">

            <div class="card card-outline card-primary">

                <div class="card-header">
                    <div class="row">
                        <div class="col-md-9">
                            TPHA Slideshows
                        </div>
                        <div class="col-md-3 text-right">
                            <button id="sliderBtn" class="btn bg-gradient-primary btn-sm"> New Slide &nbsp; <i class="fas fa-fw fa-plus-circle"></i></button>
                        </div>
                    </div>
                </div>

                <div class="card-body">
                    <table class="table w-100" id="slider_table">
                        <thead class="bg-gradient-light">
                            <th>S/N</th>
                            <th>Image</th>
                            <th>Description</th>
                            <th>Address</th>
                            <th>Status</th>
                            <th>Last Update</th>
                            <th>Action</th>
                        </thead>

                        <tbody>

                            @foreach ($sliders as $item)
                            <tr>
                                <td>{{$loop->index+1}}</td>
                                @if($item->image_attachment == '')
                                <td>--</td>
                                @else
                                <td>
                                    <a href="{{url('/uploads/sliders/'.$item->image_attachment)}} "target="_blank"><img class="img-fluid" style="max-width: 50px; max-height: 90vh; margin: auto;" src="{{url('/uploads/sliders/'.$item->image_attachment)}}"></a>
                                </td>
                                @endif
                                <td>{{substr($item->description,0,30).'...'}}</td>
                                <td><a href="{{url($item->address)}}" target="_blank">{{$item->address}}</a></td>
                                <td>{{$item->publish_status}}</td>
                                <td>{{Carbon\Carbon::parse($item->updated_at)->format('d.m.Y')}}</td>
                                <td>
                                    <button class="edit btn btn-sm bg-gradient-primary" id="{{$item->id}}"><i class="fas fa-fw fa-edit"></i></button>&nbsp;&nbsp;
                                    <button class="delete btn btn-sm bg-gradient-danger" id="{{$item->id}}"><i class="fas fa-fw fa-trash"></i></button>
                                </td>
                            </tr>  
                            @endforeach
                            
                        </tbody>
                    </table>
                </div>

            </div>

        </div>

    </div>
    

    <div class="modal fade" id="sliderModal" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header bg-gradient-primary">
                    <h5 class="modal-title">Modal title</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true"><i class="fas fa-fw fa-times-circle text-white"></i></span>
                        </button>
                </div>
                <div class="modal-body">
                    
                    <form id="slider_form">

                        @csrf

                        <div class="form-group">
                            <label for="">Image Title:</label>
                            <input type="text" name="image_title" id="image_title" class="form-control" placeholder="Image Title">
                        </div>

                        <div class="form-group" id="divImage">
                            <label for="">Slider Image:</label>
                            <input type="file" name="photo" class="form-control" accept="image/.png,.gif,.jpeg,.jpg,.png" placeholder="Upload Image">
                        </div>

                        <div class="from-group">
                            <div class="row">

                                <div class="col-md-6">
                                    <label for="">Publish Status:</label>
                                    <select name="publish_status" id="publish_status" class="form-control" required>
                                        <option value="">Select Status</option>
                                        <option value="published">Published</option>
                                        <option value="unpublished">Unpublished</option>
                                    </select>
                                </div>

                                <div class="col-md-6">
                                    <label for="">Address:</label>
                                    <input type="text" name="address" id="address" placeholder="Page Address" class="form-control">
                                </div>
                            </div>
                            
                        </div>

                        <div class="form-group pt-2">
                            <label for="">Description:</label>
                            <textarea class="form-control" name="description" id="description" placeholder="Enter Slider Description" rows="3"></textarea>
                        </div>

                        <div class="loader text-center mb-2" style='display: none;'>
                            <img src="{{asset('images/loader.gif')}}" width="100px" height="15px">
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn bg-gradient-warning" data-dismiss="modal">Close &nbsp; <i class="fas fa-fw fa-times-circle"></i></button>
                            <input type="hidden" name="action_button" id="action_button">
                            <input type="hidden" name="hidden_data" id="hidden_data">
                            <button type="submit" class="btn bg-gradient-primary">Save &nbsp; <i class="fas fa-fw fa-save"></i></button>
                        </div>
                    </form>
                </div>
                
            </div>
        </div>
    </div>

    <script>

        $("document").ready(function(){

            //turning on modal
            $('#sliderBtn').on('click',function(){
                $('.modal-title').text('New Slider Image');
                $('#slider_form')[0].reset();
                $('#action_button').val("Create");
                $('.loader').hide();
                $('#sliderModal').modal('show');
            });

            //datatable
            $('#slider_table').DataTable({
                processing: true,
                responsive: true,
                serverSide: false,
            });

            //submitting form
            $('#slider_form').on('submit', function(event){
                event.preventDefault();

                var data_url = '';

                //setting directions for store route
                if($('#action_button').val() == "Create"){
                    data_url = "{{ route('slider.store') }}";
                }

                //setting direction for update route
                if($('#action_button').val() == "Edit"){
                    data_url = "{{ route('slider.update') }}";
                }

                $.ajax({
                    url: data_url,
                    method: "POST",
                    data: new FormData(this),
                    dataType: 'JSON',
                    contentType: false,
                    cache: false,
                    processData: false,

                    beforeSend: function(){
                    // Show image container
                    $(".loader").show();
                    },

                    success: function(data){

                        if(data.errors){

                            var result = data.errors;

                            Swal.fire({
                                title: "Info!",
                                type: "info",
                                icon: "info",
                                text: result,
                                timer: 4500,
                                showConfirmButton: false,
                                showCancelButton: false,
                            })
                        }

                        //uploading
                        if(data.success){

                            $('#sliderModal').hide();
                            $('.loader').hide();
                            $('#slider_form')[0].reset();

                            var result = data.success;

                            Swal.fire({
                                title: "Notification!",
                                type: "success",
                                icon: "success",
                                text: result,
                                timer: 2500,
                                showConfirmButton: false,
                                showCancelButton: false,
                            })

                            //refreshing the page
                            setTimeout(function () {
                                window.location = "{{url('slider')}}";
                            }, 2000);

                        }
                    }
                })
            })

            //editing function
            $(document).on('click','.edit',function(event){
                event.preventDefault();
                var id = $(this).attr('id');
                
                $.ajax({
                    url: "/slider/" + id + "/edit",
                    success: function(data){
                        $('#address').val(data.result.address);
                        $('#image_title').val(data.result.image_title);
                        $('#description').val(data.result.description);
                        $('#publish_status').val(data.result.publish_status);
                        $('.modal-title').text('Update Slider');
                        $('#hidden_data').val(id);
                        $('.loader').hide();
                        $('#action_button').val('Edit');
                        $('#sliderModal').modal('show');
                    }
                })
            }) 

            //deletion
            $(document).on('click', '.delete', function (event) {
                event.preventDefault();
                var delete_id = $(this).attr('id');

                Swal.fire({
                    title: "Are you sure?",
                    text: "You won't be able to revert this!",
                    icon: 'warning',
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, delete it!',
                    cancelButtonText: 'No, keep it'

                }).then((result) => {
                    if (result.value) {

                        $.ajax({
                            url: "/slider/destroy/" + delete_id,
                            success: function (data) {

                                var result = data.success;

                                if(data.success){
                                
                                    //alerting
                                    Swal.fire({
                                        title: 'Deleted!',
                                        text: result,
                                        type: 'success',
                                        icon: 'success',
                                        showCancelButton: false,
                                        showConfirmButton: false,
                                        timer: 2000,
                                    });

                                    //refreshing page
                                    setTimeout(function () {
                                        window.location = "{{url('slider')}}";
                                    }, 2000);
                                }

                            }

                        });

                    } else if (result.dismiss === Swal.DismissReason.cancel) {
                        Swal.fire({
                            title: 'Information!',
                            text: 'Your Detail is Safe.',
                            type: 'info',
                            icon: 'info',
                            timer: 2000,
                            showCancelButton: false,
                            showConfirmButton: false,
                        })
                    }
                })

            });
        })

    </script>
@endsection