@extends('Admin.layouts.app')
@section('content')
    <div class="row">
        <div class="col-lg-4 col-sm-4">
            <div class="card">
                <div class="card-header">
                    <h3>Add Promo Section 1</h3>
                </div>
                <div class="card-body">
                    <form action="{{ route('admin.promo_section_1') }}" method="POST" enctype="multipart/form-data">
                        @csrf

                        @if ($errors->any())
                            {!! implode('', $errors->all('<div class="text-danger">:message</div>')) !!}
                        @endif
                        <div class="mb-3">
                            <label for="" class="form-label">Short Text</label>

                            <input type="text" class="form-control" name="short_text_1"
                                value="{{ isset($promo_section_1) ? $promo_section_1->short_text : '' }}">
                        </div>
                        <div class="mb-3">
                            <label for="logo" class="form-label">Upload Promo 1</label>
                            <input type="file" name="promo_1" id="logo" class="form-control" accept="image/*">
                        </div>
                        <div class="mb-3">
                            <div id="imagePreview" class="d-flex justify-content-center align-items-center"
                                style="border: 1px solid #ddd; padding: 10px; border-radius: 5px; width: 100%; height: 200px; background-color: #f8f9fa;">

                                @if (isset($promo_section_1))
                                    <img src="{{ asset('/') }}{{ $promo_section_1->image }}"
                                        style="max-width:100%;max-height:100%;" alt="">
                                @else
                                @endif


                            </div>
                        </div>
                        <div class="mb-3">
                            <button class="btn btn-primary">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-sm-4">
            <div class="card">
                <div class="card-header">
                    <h3>Add Promo Section 2</h3>
                </div>
                <div class="card-body">
                    <form action="{{ route('admin.promo_section_2') }}" method="POST" enctype="multipart/form-data">
                        @csrf

                        @if ($errors->any())
                            {!! implode('', $errors->all('<div class="text-danger">:message</div>')) !!}
                        @endif
                        <div class="mb-3">
                            <label for="" class="form-label">Short Text</label>

                            <input type="text" class="form-control" name="short_text_2"
                                value="{{ isset($promo_section_2) ? $promo_section_2->short_text : '' }}">
                        </div>
                        <div class="mb-3">
                            <label for="logo" class="form-label">Upload Promo 2</label>
                            <input type="file" name="promo_1" id="promo_2" class="form-control" accept="image/*">
                        </div>
                        <div class="mb-3">
                            <div id="imagePreview_promo" class="d-flex justify-content-center align-items-center"
                                style="border: 1px solid #ddd; padding: 10px; border-radius: 5px; width: 100%; height: 200px; background-color: #f8f9fa;">

                                @if (isset($promo_section_2))
                                    <img src="{{ asset('/') }}{{ $promo_section_2->image }}"
                                        style="max-width:100%;max-height:100%;" alt="">
                                @else
                                @endif


                            </div>
                        </div>
                        <div class="mb-3">
                            <button class="btn btn-primary">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-lg-4 col-sm-4">
            <div class="card">
                <div class="card-header">
                    <h3>Add Promo Section 3</h3>
                </div>
                <div class="card-body">
                    <form action="{{ route('admin.promo_section_3') }}" method="POST" enctype="multipart/form-data">
                        @csrf

                        @if ($errors->any())
                            {!! implode('', $errors->all('<div class="text-danger">:message</div>')) !!}
                        @endif
                        <div class="mb-3">
                            <label for="" class="form-label">Short Text</label>

                            <input type="text" class="form-control" name="short_text_3"
                                value="{{ isset($promo_section_3) ? $promo_section_3->short_text : '' }}">
                        </div>
                        <div class="mb-3">
                            <label for="logo" class="form-label">Upload Promo 2</label>
                            <input type="file" name="promo_1" id="promo_3" class="form-control" accept="image/*">
                        </div>
                        <div class="mb-3">
                            <div id="imagePreview_promo3" class="d-flex justify-content-center align-items-center"
                                style="border: 1px solid #ddd; padding: 10px; border-radius: 5px; width: 100%; height: 200px; background-color: #f8f9fa;">

                                @if (isset($promo_section_3))
                                    <img src="{{ asset('/') }}{{ $promo_section_3->image }}"
                                        style="max-width:100%;max-height:100%;" alt="">
                                @else
                                @endif


                            </div>
                        </div>
                        <div class="mb-3">
                            <button class="btn btn-primary">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>


    <script>
        $(document).ready(function() {
            $('#logo').change(function(event) {
                const imagePreview = $('#imagePreview');
                imagePreview.empty();

                const file = event.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        const img = $('<img>').attr('src', e.target.result).css({
                            'max-width': '100%',
                            'max-height': '100%'
                        });
                        imagePreview.append(img);
                    }
                    reader.readAsDataURL(file);
                } else {
                    imagePreview.html('<span class="text-muted">Image preview will appear here</span>');
                }
            });
        });
    </script>

<script>
    $(document).ready(function() {
        $('#promo_2').change(function(event) {
            const imagePreview = $('#imagePreview_promo');
            imagePreview.empty();

            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const img = $('<img>').attr('src', e.target.result).css({
                        'max-width': '100%',
                        'max-height': '100%'
                    });
                    imagePreview.append(img);
                }
                reader.readAsDataURL(file);
            } else {
                imagePreview.html('<span class="text-muted">Image preview will appear here</span>');
            }
        });
    });
</script>

<script>
    $(document).ready(function() {
        $('#promo_3').change(function(event) {
            const imagePreview = $('#imagePreview_promo3');
            imagePreview.empty();

            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const img = $('<img>').attr('src', e.target.result).css({
                        'max-width': '100%',
                        'max-height': '100%'
                    });
                    imagePreview.append(img);
                }
                reader.readAsDataURL(file);
            } else {
                imagePreview.html('<span class="text-muted">Image preview will appear here</span>');
            }
        });
    });
</script>

    <script>
        $(document).ready(function() {
            $('#slider').change(function(event) {
                const imagePreview = $('#imagePreview_carousel');
                imagePreview.empty();

                const file = event.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        const img = $('<img>').attr('src', e.target.result).css({
                            'max-width': '100%',
                            'max-height': '100%'
                        });
                        imagePreview.append(img);
                    }
                    reader.readAsDataURL(file);
                } else {
                    imagePreview.html('<span class="text-muted">Image preview will appear here</span>');
                }
            });
        });
    </script>

    @if (session('success'))
        <script>
            const Toast = Swal.mixin({
                toast: true,
                position: "top-end",
                showConfirmButton: false,
                timer: 3000,
                timerProgressBar: true,
                didOpen: (toast) => {
                    toast.onmouseenter = Swal.stopTimer;
                    toast.onmouseleave = Swal.resumeTimer;
                }
            });
            Toast.fire({
                icon: "success",
                title: "{{ session('success') }}"
            });
        </script>
    @endif

    @if (session('error'))
        <script>
            const Toast = Swal.mixin({
                toast: true,
                position: "top-end",
                showConfirmButton: false,
                timer: 3000,
                timerProgressBar: true,
                didOpen: (toast) => {
                    toast.onmouseenter = Swal.stopTimer;
                    toast.onmouseleave = Swal.resumeTimer;
                }
            });
            Toast.fire({
                icon: "error",
                title: "{{ session('success') }}"
            });
        </script>
    @endif
@endsection