@extends('layouts.app')

@section('content')
    {{-- @include('components.sidebar') --}}
    {{-- @include('components.profile') --}}
    <div class="grid grid-cols-3 p-4 gap-6 mt-24 w-screen">
        <form action="{{ route('customer.postUploadFile') }}" method="POST" enctype="multipart/form-data" onsubmit="showLoading()">
            @csrf
            <div
                class="flex flex-col p-4 border rounded-lg duration-300 hover:bg-[#f2f3f436] hover:shadow-md hover:shadow-theme_secondary_gray">
                <label for="fileName" class="text-gray-300">Logo Yukle</label>
                <input type="text" name="fileName" class="input-1 " placeholder="Dosya ismini giriniz">
                <input name="image"
                    class="p-3 mt-3 block w-full text-sm text-gray-300 border border-gray-300 rounded-lg cursor-pointer bg-theme_secondary_black focus:outline-none file:bg-theme_secondary_black file:border-none file:hidden"
                    id="image_input" type="file">
                <button id="image_upload" class="button-1 mt-3 text-gray-300" disabled>Kaydet</button>
            </div>
        </form>
        <form action="{{ route('customer.postUploadFile') }}" method="POST" enctype="multipart/form-data" onsubmit="showLoading()">
            @csrf
            <div
                class="flex flex-col p-4 border rounded-lg duration-300 hover:bg-[#f2f3f436] hover:shadow-md hover:shadow-theme_secondary_gray">
                <label for="fileName" class="text-gray-300">Excel Yule</label>
                <input type="text" name="fileName" class="input-1 " placeholder="Dosya ismini giriniz">
                <input name="excel_file"
                    class="p-3 mt-3 block w-full text-sm text-gray-300 border border-gray-300 rounded-lg cursor-pointer bg-theme_secondary_black focus:outline-none file:bg-theme_secondary_black file:border-none file:hidden"
                    id="excel_input" type="file">
                <button id="excel_upload" class="button-1 mt-3 text-gray-300" disabled>Kaydet</button>
            </div>
        </form>
        <form action="{{ route('customer.postUploadFile') }}" method="POST" enctype="multipart/form-data" onsubmit="showLoading()">
            @csrf
            <div
                class="flex flex-col p-4 border rounded-lg duration-300 hover:bg-[#f2f3f436] hover:shadow-md hover:shadow-theme_secondary_gray">
                <label for="fileName" class="text-gray-300">Pdf Yukle</label>
                <input type="text" name="fileName" class="input-1 " placeholder="Dosya ismini giriniz">
                <input name="pdf_file"
                    class="p-3 mt-3 block w-full text-sm text-gray-300 border border-gray-300 rounded-lg cursor-pointer bg-theme_secondary_black focus:outline-none file:bg-theme_secondary_black file:border-none file:hidden"
                    id="pdf_input" type="file">
                <button id="pdf_upload" class="button-1 mt-3 text-gray-300" disabled>Kaydet</button>
            </div>
        </form>
        <form action="{{ route('customer.postUploadFile') }}" method="POST" enctype="multipart/form-data" onsubmit="showLoading()">
            @csrf
            <div
                class="flex flex-col p-4 border rounded-lg duration-300 hover:bg-[#f2f3f436] hover:shadow-md hover:shadow-theme_secondary_gray">
                <label for="fileName" class="text-gray-300">Word Yukle</label>
                <input type="text" name="fileName" class="input-1 " placeholder="Dosya ismini giriniz">
                <input name="word_file"
                    class="p-3 mt-3 block w-full text-sm text-gray-300 border border-gray-300 rounded-lg cursor-pointer bg-theme_secondary_black focus:outline-none file:bg-theme_secondary_black file:border-none file:hidden"
                    id="word_input" type="file">
                <button id="word_upload" class="button-1 mt-3 text-gray-300" disabled>Kaydet</button>
            </div>
        </form>
    </div>
    @if ($errors->any())
        <div id="popup-modal" tabindex="-1"
            class="fixed items-center justify-center right-0 z-50 top-[50%] left-[50%] p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full">
            <div class="relative w-full max-w-md max-h-full top-[40%] left-[40%]">
                <div class="relative bg-theme_black rounded-lg shadow border border-gray-400">
                    <button id="closeModalButton" type="button"
                        class="absolute top-3 right-2.5 text-gray-300 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center"
                        data-modal-hide="popup-modal">
                        <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
                        </svg>
                        <span class="sr-only">Close modal</span>
                    </button>
                    <div class="p-6 text-center">
                        <svg class="mx-auto mb-4 text-gray-300 w-12 h-12 dark:text-gray-200" aria-hidden="true"
                            xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                        </svg>
                        @foreach ($errors->all() as $error)
                            <h3 class="mb-5 text-lg font-normal text-gray-300">{{ $error }}</h3>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    @endif
@endsection
@section('javascript')
    <script>
        $(document).ready(function() {
            $('#closeModalButton').click(function() {
                $('#popup-modal').hide(); // Modalin gizlenmesi
            });

            $('#image_input').change(function() {
                if (this.files && this.files[0]) {
                    $('#image_upload').prop('disabled', false); // Dosya seçildiğinde buton aktif olsun
                } else {
                    $('#image_upload').prop('disabled', true); // Dosya seçilmediğinde buton pasif olsun
                }
            });

            $('#excel_input').change(function() {
                if (this.files && this.files[0]) {
                    $('#excel_upload').prop('disabled', false); // Dosya seçildiğinde buton aktif olsun
                } else {
                    $('#excel_upload').prop('disabled', true); // Dosya seçilmediğinde buton pasif olsun
                }
            });

            $('#pdf_input').change(function() {
                if (this.files && this.files[0]) {
                    $('#pdf_upload').prop('disabled', false); // Dosya seçildiğinde buton aktif olsun
                } else {
                    $('#pdf_upload').prop('disabled', true); // Dosya seçilmediğinde buton pasif olsun
                }
            });

            $('#word_input').change(function() {
                if (this.files && this.files[0]) {
                    $('#word_upload').prop('disabled', false); // Dosya seçildiğinde buton aktif olsun
                } else {
                    $('#word_upload').prop('disabled', true); // Dosya seçilmediğinde buton pasif olsun
                }
            });
        });
    </script>
@endsection