@extends('layouts.admin_main')

@section('content')
<style>
    .label {
        color: #777;
    }

    .input {
        color: #777;
    }

</style>
<div class="content-wrapper">
    <div class="card">
        <div class="card-header">
            <span>General Settings</span>
        </div>
    </div>

    <section class="content">
        <div class="container-fluid">
            @if (session('status'))
            <h5 class="alert alert-success" id="status">{{ session('status') }}</h5>
            @endif
            <div id="success_message"></div>

            <div class="col-7">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title" style="color: #2590e4;font-weight:600;font-size: 16px">Company Settings</h3>
                    </div>
                    <div class="card-body">
                        <form id="upload_form" enctype="multipart/form-data">
                            @csrf
                            <!-- Logo Upload -->
                            <div class="form-group">
                                <label for="logo">Upload Logo</label>
                                <input type="file" name="logo" id="logo" class="form-control">
                                <img id="logo_preview" src="{{ $logoPath ?? asset('path/to/default/logo.png') }}" alt="Current Logo" style="max-width: 100px; margin-top: 10px;">

                            </div>

                            <!-- Banner Upload -->
                            <div class="form-group">
                                <label for="banner">Upload Banner</label>
                                <input type="file" name="banner" id="banner" class="form-control">
                                <img id="banner_preview" src="{{ $bannerPath ?? asset('path/to/default/banner.png') }}" alt="Current Banner" style="max-width: 100px; margin-top: 10px;">

                            </div>

                            <button type="submit" class="btn btn-primary">Save Changes</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

<script>
    $(document).ready(function() {
        $('#upload_form').on('submit', function(e) {
            e.preventDefault();
            var formData = new FormData(this);

            $.ajax({
                type: 'POST'
                , url: '{{ route("admin.saveSettings") }}',
                data: formData
                , contentType: false
                , processData: false
                , success: function(response) {
                    if (response.success) {
                        if (response.logoPath) {
                            $('#logo_preview').attr('src', response.logoPath);
                        }
                        if (response.bannerPath) {
                            $('#banner_preview').attr('src', response.bannerPath);
                        }
                        {{--  $('#success_message').text('Settings updated successfully').fadeIn().delay(3000).fadeOut();
                          --}}
                          alert('Settings saved succesfully!')
                    }
                }
                , error: function(xhr, status, error) {
                    // Handle error
                    $('#error_message').text('An error occurred while uploading.').fadeIn().delay(3000).fadeOut();
                }
            });
        });
    });

</script>

@endsection