@extends('layouts.adminLayout.admin_design')
@section('content')
    <!-- end:: Header -->
    <div class="kt-content  kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor" id="kt_content">



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


                    <!--begin::Portlet-->
                    <div class="kt-portlet">
                        <div class="kt-portlet__head">
                            <div class="kt-portlet__head-label">
                                <h3 class="kt-portlet__head-title">Add Galleries</h3>
                            </div>
                        </div>

                        <!--begin::Form-->
                        <form class="kt-form" enctype="multipart/form-data" action="{{ url('admin/galleries') }}" method="post">
                            {{ csrf_field() }}
                            <div class="kt-portlet__body">
                                @if (Session::has('flash_message_success'))
                                    <div class="alert alert-success fade show" role="alert">

                                        <div class="alert-text">{!! session('flash_message_success') !!}</div>
                                        <div class="alert-close">
                                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                <span aria-hidden="true"><i class="la la-close"></i></span>
                                            </button>
                                        </div>
                                    </div>
                                @endif
                                @if (Session::has('flash_message_error'))
                                    <div class="alert alert-error fade show" role="alert">
                                        <div class="alert-icon"><i class="flaticon-warning"></i></div>
                                        <div class="alert-text">{!! session('flash_message_error') !!}</div>
                                        <div class="alert-close">
                                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                <span aria-hidden="true"><i class="la la-close"></i></span>
                                            </button>
                                        </div>
                                    </div>
                                @endif


                                <div class="kt-section kt-section--first">

                                    <div class="kt-section__body">




                                        <div class="form-group row">
                                            <label class="col-lg-2 col-form-label">Select Category:</label>
                                            <div class="col-lg-10">
                                                <select class="form-control" name="gallery_category_id">
                                                    <option value="">Select</option>
                                                    @foreach(App\GalleryCategory::get() as $category)
                                                    <option value="{{ $category->id }}">{{$category->name}}</option>
                                                    @endforeach
                                                </select>

                                            </div>
                                        </div>


                                        <div class="form-group row">
                                            <label class="col-lg-2 col-form-label">Description:</label>
                                            <div class="col-lg-10">
                                                <input id="name" type="text" name="description" required
                                                    class="form-control" value="" placeholder="Enter Description" autofocus>

                                            </div>
                                        </div>





                                        <div class="form-group row">
                                            <label class="col-lg-2 col-form-label">Image</label>
                                            <div class="col-lg-10">
                                                <input id="image" type="file" required name="image"
                                                    class="form-control">

                                            </div>
                                        </div>





                                        <div class="form-group row mb-0">
                                            <div class="col-md-6 offset-md-4">
                                                <button type="submit" class="btn btn-primary">
                                                    SAVE
                                                </button>
                                            </div>
                                        </div>




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


                        <!--end::Form-->
                    </div>

                    <!--end::Portlet-->
                </div>

            </div>


        </div>



        <div class="row">

            <div class="kt-container  kt-container--fluid  kt-grid__item kt-grid__item--fluid">
                <div class="col-lg-12">

                    <div class="kt-portlet kt-portlet--mobile">
                        <div class="kt-portlet__head kt-portlet__head--lg">
                            <div class="kt-portlet__head-label">
                                <h3 class="kt-portlet__head-title">
                                    Categories
                                </h3>
                            </div>
                            <div class="kt-portlet__head-toolbar">
                                <div class="kt-portlet__head-wrapper">
                                    <div class="dropdown dropdown-inline">
                                        <button type="button" class="btn btn-default btn-bold btn-upper btn-font-sm " data-toggle="modal" data-target="#exampleModal">
                                            Add New
                                        </button>


                                    </div>
                                    &nbsp;

                                </div>
                            </div>
                        </div>
                        <div class="kt-portlet__body">

                            <!--begin: Search Form -->
                            <div class="kt-form kt-fork--label-right kt-margin-t-20 kt-margin-b-10">
                                <div class="row align-items-center">
                                    <div class="col-xl-8 order-2 order-xl-1">
                                        <div class="row align-items-center">
                                            <div class="col-md-4 kt-margin-b-20-tablet-and-mobile">
                                                <div class="kt-input-icon kt-input-icon--left">
                                                    <input type="text" class="form-control" placeholder="Search..." id="generalSearch">
                                                    <span class="kt-input-icon__icon kt-input-icon__icon--left">
                                                        <span><i class="la la-search"></i></span>
                                                    </span>
                                                </div>
                                            </div>

                                        </div>
                                    </div>

                                </div>
                            </div>

                            <!--end: Search Form -->
                        </div>
                        <div class="kt-portlet__body kt-portlet__body--fit">

                            <!--begin: Datatable -->
                            <table class="kt-datatable" id="html_table" width="100%">
                                <thead>
                                    <tr>
                                        <th title="Field #2">Description</th>
                                        <th>Image</th>
                                        <th>Category</th>
                                        <th title="Field #6">Action</th>

                                    </tr>
                                </thead>
                                <tbody>

                                    @foreach($galleries as $gallery)
                                    <tr>

                                        <td>{{ $gallery->description }}</td>
                                        <td>

                                            <img src="{{ asset('images/galleries/'.$gallery->image) }}"
                                            style="height: 40px;">
                                        </td>
                                        <td>
                                            {{ $gallery->category->name }}
                                        </td>



                                        <td>

                                            <a href="{{ url('/admin/editgalleries/' . $gallery->id) }}" class="btn btn-sm btn-clean btn-icon btn-icon-md" title="Edit details">
                                                <i class="la la-edit"></i>
                                            </a>

                                            <a  data-id="{{ $gallery->id }}" data-url="{{ url('admin/deleteGalleries') }}" href="javascript:;" class="deleteButton btn btn-sm btn-clean btn-icon btn-icon-md " >
                                                <i class="la la-trash"></i>
                                            </a>



                                        </td>
                                    </tr>
                                    @endforeach

                                </tbody>
                            </table>

                            <!--end: Datatable -->
                        </div>
                    </div>
                </div>
            </div>


        </div>



        <!-- end:: Content -->
    </div>





    <script type="text/javascript">
        "use strict";

        // Class definition

        var KTDatatableHtmlTableDemo = function() {
            // Private functions

            // demo initializer
            var demo = function() {

                var datatable = $('.kt-datatable').KTDatatable({
                    data: {
                        saveState: {
                            cookie: false
                        },
                    },
                    layout: {
                        scroll: true,
                        height: 550,
                        footer: false
                    },
                    search: {
                        input: $('#generalSearch'),
                    },
                    columns: [
                        {
                            field: 'DepositPaid',
                            type: 'number',
                        },
                        {
                            field: 'OrderDate',
                            type: 'date',
                            format: 'YYYY-MM-DD',
                        }, {
                            field: 'Status',
                            title: 'Status',
                            autoHide: false,

                        },{
                            field: 'Category ID',
                            title: 'Category ID',
                            autoHide: false,
                            width: 50,
                        },
                            {
                            field: 'Image',
                            title: 'Image',
                            width: 100,
                            autoHide: false,
                        },{
                            field: 'Image',
                            title: 'Image',
                            autoHide: false,
                        },
                        {
                            field: 'Action',
                            title: 'Action',
                            autoHide: false,
                        },{
                            field: 'Total Fundraisings',
                            title: 'Total Fundraisings',
                            autoHide: false,
                        },
                        {
                            field: 'Type',
                            title: 'Type',
                            autoHide: false,
                            // callback function support for column rendering
                            template: function(row) {
                                var status = {
                                    1: {
                                        'title': 'SenangPay',
                                        'state': 'danger'
                                    },
                                    2: {
                                        'title': 'Paypal',
                                        'state': 'primary'
                                    },

                                };
                                return '<span class="kt-badge kt-badge--' + status[row.Type].state + ' kt-badge--dot"></span>&nbsp;<span class="kt-font-bold kt-font-' + status[row.Type].state + '">' + status[row.Type].title + '</span>';
                            },
                        },
                    ],
                });

                $('#kt_form_status').on('change', function() {
                    datatable.search($(this).val().toLowerCase(), 'Status');
                });

                $('#kt_form_type').on('change', function() {
                    datatable.search($(this).val().toLowerCase(), 'Type');
                });

                $('#kt_form_status,#kt_form_type').selectpicker();
            };

            return {
                // Public functions
                init: function() {
                    // init dmeo
                    demo();
                }
            };
        }();

        jQuery(document).ready(function() {
            KTDatatableHtmlTableDemo.init();
        });
    </script>




    <script type="text/javascript">
        "use strict";
        // Class definition

        var KTSummernoteDemo = function() {
            // Private functions
            var demos = function() {
                $('.summernote').summernote({
                    height: 150
                });
            }

            return {
                // public functions
                init: function() {
                    demos();
                }
            };
        }();

        // Initialization
        jQuery(document).ready(function() {
            KTSummernoteDemo.init();
        });
    </script>
    <script type="text/javascript">
        "use strict";

        // Class definition
        var KTSweetAlert2Demo = function() {

            // Demos
            var initDemos = function() {



                $('.deleteRecord').click(function(e) {
                    var id = $(this).attr('rel');
                    //console.log(id);
                    swal.fire({
                        title: 'Are you sure?',
                        text: "You won't be able to revert this!",
                        type: 'warning',
                        showCancelButton: true,
                        confirmButtonText: 'Yes, delete it!'
                    }).then(function(result) {
                        //window.location.href='/delete';
                        if (result.value) {

                            window.location.href = "/admin/deleteGalleries/" + id;
                            console.log('succes function');
                            swal.fire(
                                'Deleted!',
                                'Your file has been deleted.',
                                'success'
                            )
                        } else {
                            console.log('error');
                        }
                    });
                });





            };

            return {
                // Init
                init: function() {
                    initDemos();
                },
            };
        }();

        // Class Initialization
        jQuery(document).ready(function() {
            KTSweetAlert2Demo.init();
        });
    </script>
@endsection