@extends('layouts.app')
@section('title', trans('menu.gallery_title'))
@section('content')
<div class="content">
    <x-content.header title="{{ __('title.gallery_title') }}" />
    <form id="form" name="album-form" action="{{route('galleries.albums.update', $album->id)}}" method="POST">
        <div class="tw-card">
            <div class="p-6">

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

                <div class="mt-4 border-t flex">
                    <button type="submit" class="btn-primary-sm mt-4 btn-save mr-2">
                        {{trans('forms.lbl_save')}}
                    </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 -->
    <script type="text/javascript">
        drEvent.on('dropify.beforeClear', function(event, element){
            if(confirm("{{trans('forms.do_you_really_want_delete')}}")) {
                return PDRequest({
                    type    : "DELETE",
                    url     : "{{route('galleries.albums.destroy.cover', $album->id)}}"
                }).then(function(response){
                    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