@extends('layouts.app')
@section('title', trans('menu.gallery_title'))
@section('plugin-styles')
    <link rel="stylesheet" href="{{asset('vendors/jquery-file-upload/uploadfile.css')}}">
@stop
@section('content')
<div class="content">
    <x-content.header title="{{ __('title.gallery_title') }}" />
    <form id="form" name="album-form" action="{{route('galleries.albums.store')}}" method="POST">
        <div class="tw-card">
            <div class="p-6">

                @include('gallery::albums.form', [
                    'edit'   => false
                ])

                <div class="mt-4 border-t flex">
                    <button type="submit" class="btn-primary-sm mt-4 btn-save mr-2">
                        {{trans('forms.lbl_create')}}
                    </button>
                    <a href="{{route('galleries.albums.index')}}"  class="btn-tertiary-sm mt-4">{{trans('forms.lbl_cancel')}}</a>
                </div>

            </div>
        </div>
    </form>
</div>
@stop

@section('footer-script')
    <!-- jQuery UI -->
    <!-- Custom js for this page-->
    <script type="text/javascript">

        drEvent.on('dropify.beforeClear', function(event, element){
            if(confirm("{{trans('forms.do_you_really_want_delete')}}")) {
                return true;
            } else {
                return false;
            }
        });

        var validateForm = $("form#form").validate(validateFormObj);

        $(".btn-save").on("click", function(event) {

            event.preventDefault();

            if($("form#form").valid()){
                let formData =  $("form#form").serializeFiles();

                PDRequest({
    				type    : "POST",
    				url     : $("#form").prop("action"),
    				data    : formData,
    				event   : event
    			}).then((response) => {
                    window.location = "{{route('galleries.albums.index')}}";
                });
            }
		});

    </script>
@stop