@props([
    'title' => '로고 관리',
    'pageTitle' => '로고 관리',
])
<x-admin.layout.default-layout :title="$title" :pageTitle="$pageTitle">

    <div id="logoManager" class="contents-wrapper">

        <form name="form_logo" method="post" action="{{ route('admin.common.logo.upsert') }}" enctype="multipart/form-data"
            onsubmit="return validateForm();">
            @csrf

            <div class="form-item">
                <div class="col">
                    <label for="logo_header_file" class="item-label">헤더 로고</label>
                    @if ($logoHeader)
                    <button type="button" class="btn btn-solid-secondary btn-delete" data-logo="header">
                        <span class="sr-only">헤더 로고 </span>삭제
                    </button>
                    @endif
                </div>

                <div class="col">
                    <input type="file" name="logo_header_file" id="logo_header_file" class="imgext">
                    @if ($logoHeader)
                    <div class="only-image">
                        <img src="{{ Storage::url($logoHeader) }}" alt="">
                    </div>
                    @endif
                    <span class="item-msg item-msg-help"></span>
                </div>
            </div>

            <div class="form-item">
                <div class="col">
                    <label for="logo_footer_file" class="item-label">푸터 로고</label>
                    @if ($logoFooter)
                    <button type="button" class="btn btn-solid-secondary btn-delete" data-logo="footer">
                        <span class="sr-only">푸터 로고 </span>삭제
                    </button>
                    @endif
                </div>

                <div class="col">
                    <input type="file" name="logo_footer_file" id="logo_footer_file" class="imgext">
                    @if ($logoFooter)
                    <div class="only-image">
                        <img src="{{ Storage::url($logoFooter) }}" alt="">
                    </div>
                    @endif
                    <span class="item-msg item-msg-help"></span>
                </div>
            </div>

            <div class="form-submit is-fixed">
                <input type="submit" class="btn btn-contained-primary" value="업로드">
            </div>

        </form>

    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 로고 삭제 버튼
            document.querySelectorAll('.btn-delete').forEach(function(button) {
                button.addEventListener('click', function() {
                    const logo = button.dataset.logo;
                    const url = "{{ route('admin.common.logo.delete', ['logo' => ':logo']) }}".replace(':logo', logo);
                    deleteConfirm(url);
                });
            });
        });

        function validateForm() {
            return true;
        }
    </script>
</x-admin.layout.default-layout>