@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 Gallery
                    </div>
                    <div class="col-md-3 text-right">
                        <button id="photoBtn" class="btn bg-gradient-primary btn-sm">New Photo &nbsp;<i
                                class="fas fa-fw fa-upload"></i></button>
                    </div>
                </div>
            </div>

            

            <div class="card-body">
                <div class="row">
                    @foreach ($galleries as $item)
                    
                        <div class="col-md-2">
                            <div class="card">
                                <img class="card-img-top" src="{{url('/uploads/gallery/'.$item->image_attachment)}}" width="150" height="150" alt="Photo">
                                <div class="card-body">
                                    <p class="card-title">Name:{{$item->image_title}}</p>
                                    <p class="card-text">Info: &nbsp;{{$item->publish_status}}</p>
                                    <p class="card-text">Date: &nbsp;{{Carbon\Carbon::parse($item->created_at)->format('d.m.Y')}}</p>
                                </div>
                                <div class="card-footer bg-light text-center">
                                    <a href="{{url('/uploads/gallery/'.$item->image_attachment)}}" target="_blank" class="card-link"><i class="fas fa-fw fa-image text-primary"></i></a>
                                    <a href="javascript::void()" id="{{$item->id}}" class="edit card-link"><i class="fas fa-fw fa-marker text-primary"></i></a>
                                    <a href="javascript::void()" id="{{$item->id}}" class="delete card-link"><i class="fas fa-fw fa-trash text-primary"></i></a>
                                </div>
                            </div>

                        </div>
                    @endforeach
                </div>
            </div>

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

<!-- Modal -->
<div class="modal fade" id="photoModal" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
    <div class="modal-dialog" 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 action="" id="photo_form">
                    @csrf

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

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

                    <div class="form-group">
                        <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="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" value="">
                        <input type="hidden" name="hidden_data" id="hidden_data" value="">
                        <button type="submit" class="btn bg-gradient-primary">Save Photo &nbsp; <i
                                class="fas fa-fw fa-save"></i></button>
                    </div>
                </form>

            </div>

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

<script>
    $("document").ready(function () {

        //displaying the modal
        $('#photoBtn').on('click', function () {
            $('.modal-title').text('Upload New Photo');
            $('#action_button').val('Create');
            $('#photo_form')[0].reset();
            $('.loader').hide();
            $('#photoModal').modal('show');
        })

        //editing function
        $(document).on('click','.edit', function(event){
            event.preventDefault();

            var id = $(this).attr('id');
            $('#photo_form')[0].reset();
            
            $.ajax({
                url: "/gallery/" + id + "/edit",
                success: function(data){
                    $('.modal-title').text('Edit Photo');
                    $('#divImage').hide();
                    $('#hidden_data').val(id);
                    $('#action_button').val('Edit');
                    $('.loader').hide();
                    $('#publish_status').val(data.result.publish_status);
                    $('#image_title').val(data.result.image_title);
                    $('#photoModal').modal('show');
                }
            })
        })

        //submitting the value
        $('#photo_form').on('submit', function (event) {
            event.preventDefault();

            if ($('#action_button').val() == "Create") {
                var data_url = "{{ route('gallery.store')}}";
            }

            if ($('#action_button').val() == "Edit") {
                var data_url = "{{ route('gallery.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 we have errors such as validation and others
                    if (data.errors) {

                        var result = data.errors;

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

                    if (data.success) {
                        $(".loader").hide();
                        $('#photoModal').hide();

                        var result = data.success;

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

                        setTimeout(function () {
                            window.location = "{{url('gallery')}}";
                        }, 2000);

                    }
                }
            })
        })

        //deleting function
        $(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: "/gallery/destroy/" + delete_id,
                        success: function (data) {

                            if(data.success){
                                var result = data.success;
                                 //alerting
                            Swal.fire({
                                title: 'Notification!',
                                text: result,
                                type: 'success',
                                icon: 'success',
                                timer: 2000,
                                showConfirmButton: false,
                                showCancelButton: false,
                            });
                            //refreshing page
                            setTimeout(function () {
                                window.location = "{{url('gallery')}}";
                            }, 2000);

                        }

                        if(data.errors){
                            var result = data.errors;

                            Swal.fire({
                                title: 'Info!',
                                text: result,
                                type: 'warning',
                                icon: 'warning',
                                timer: 3000,
                                showConfirmButton: false,
                                showCancelButton: false,
                            });
                        }
                      }
                           
                    });

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

        });


    })
</script>
@endsection