@extends('backend.layout.app')

@section('content')
<div class="page-content">
    <div class="container-fluid">
        <h4 class="mb-4">Media Management</h4>

        <div class="row">
           <form action="{{ route('admin.setting.updateMedia') }}" method="POST" enctype="multipart/form-data">
    @csrf
    <div class="row">
        <!-- Logo -->
        <div class="col-md-4">
            <div class="card mb-4">
                <div class="card-header">Logo <small>(Recommended size: 130 × 50 px)</small></div>
                <div class="card-body text-center">
                    <input type="file" name="logo" class="form-control dropify mb-2" data-default-file="{{ $setting->logo ? asset($setting->logo) : '' }}" accept="image/*">
                </div>
            </div>
        </div>

        <!-- Dark Logo -->
        <div class="col-md-4">
            <div class="card mb-4">
                <div class="card-header">Dark Logo <small>(Recommended size: 130 × 50 px)</small></div>
                <div class="card-body text-center">
                    <input type="file" name="dark_logo" class="form-control dropify mb-2" data-default-file="{{ $setting->dark_logo ? asset($setting->dark_logo) : '' }}" accept="image/*">
                </div>
            </div>
        </div>

        <!-- Favicon -->
        <div class="col-md-4">
            <div class="card mb-4">
                <div class="card-header">Favicon <small>(Recommended size: 60 × 60 px)</small></div>
                <div class="card-body text-center">
                    <input type="file" name="favicon" class="form-control dropify mb-2" data-default-file="{{ $setting->favicon ? asset($setting->favicon) : '' }}" accept="image/*">
                </div>
            </div>
        </div>

        <!-- Web App Icon (PWA) -->
        <div class="col-md-4">
            <div class="card mb-4 border border-primary">
                <div class="card-header bg-light text-primary fw-bold d-flex justify-content-between align-items-center">
                    <span><i class="bi bi-phone me-1"></i> Web App Icon (PWA)</span>
                    <small class="text-muted">(512 × 512 px)</small>
                </div>
                <div class="card-body text-center">
                    <input type="file" name="pwa_icon" class="form-control dropify mb-2" data-default-file="{{ (!empty($setting->pwa_icon) && file_exists(public_path($setting->pwa_icon))) ? asset($setting->pwa_icon) : '' }}" accept="image/png,image/jpeg,image/webp">
                    <small class="text-muted d-block mt-1 mb-3">App icon used when installed on Mobile & Desktop</small>

                    <!-- PWA Mobile Install Popup Toggle -->
                    <div class="border-top pt-3 text-start">
                        <div class="form-check form-switch d-flex align-items-center justify-content-between p-0 m-0">
                            <label class="form-check-label fw-semibold text-dark mb-0" for="show_pwa_install_prompt">
                                <i class="bi bi-bell-fill text-warning me-1"></i> Show Install Popup on Mobile
                            </label>
                            <input class="form-check-input ms-2" type="checkbox" role="switch" id="show_pwa_install_prompt" name="show_pwa_install_prompt" value="1" {{ ($setting->show_pwa_install_prompt ?? 1) ? 'checked' : '' }} style="width: 2.5em; height: 1.3em; cursor: pointer;">
                        </div>
                        <small class="text-muted d-block mt-1">If enabled, visitors on mobile & desktop will see a floating "Install App" banner.</small>
                    </div>
                </div>
            </div>
        </div>

        <!-- Footer Image -->
        <div class="col-md-4">
            <div class="card mb-4">
                <div class="card-header">Footer Image <small>(Recommended size: 150 × 60 px)</small></div>
                <div class="card-body text-center">
                    <input type="file" name="footer_image" class="form-control dropify mb-2" data-default-file="{{ $setting->footer_image ? asset($setting->footer_image) : '' }}" accept="image/*">
                </div>
            </div>
        </div>

        <!-- Footer Logo -->
        <div class="col-md-4">
            <div class="card mb-4">
                <div class="card-header">Footer Logo <small>(Recommended size: 130 × 50 px)</small></div>
                <div class="card-body text-center">
                    <input type="file" name="footer_logo" class="form-control dropify mb-2" data-default-file="{{ $setting->footer_logo ? asset($setting->footer_logo) : '' }}" accept="image/*">
                </div>
            </div>
        </div>

        <!-- Payment Gateway Image -->
        <div class="col-md-4">
            <div class="card mb-4">
                <div class="card-header">Payment Gateway Image <small>(Recommended size: 300 × 50 px)</small></div>
                <div class="card-body text-center">
                    <input type="file" name="payment_gateway_image" class="form-control dropify mb-2" data-default-file="{{ $setting->payment_gateway_image ? asset($setting->payment_gateway_image) : '' }}" accept="image/*">
                </div>
            </div>
        </div>
    </div>

    <!-- Update Button -->
    <div class="row">
        <div class="col-12 text-center">
            <button type="submit" class="btn btn-primary btn-lg">Update</button>
        </div>
    </div>
</form>

        </div>
       
    </div>
</div>
@endsection