@extends('layouts.admin')

@section('content')
    <div class="page-wrapper">
        <!-- Page header -->
        <div class="page-header d-print-none">
            <div class="container-xl">
                <div class="row g-2 align-items-center">
                    <div class="col">
                        <h2 class="page-title">Settings</h2>
                    </div>
                </div>
            </div>
        </div>

        <!-- Page body -->
        <div class="page-body">
            <div class="container-fluid">
                <div class="row">
                    <!-- Left Side - Sidebar with Section Links -->
                    <div class="col-md-3 card">
                        <div class="list-group card-body" id="list-tab" role="tablist">
                            <a class="list-group-item list-group-item-action active" id="list-website-settings-list"
                                data-bs-toggle="tab" href="#website_settings" role="tab"
                                aria-controls="website_settings">
                                Website Settings</a>
                            <a class="list-group-item list-group-item-action" id="list-main-layout-list"
                                data-bs-toggle="tab" href="#main_layout" role="tab" aria-controls="main_layout">Main
                                Layout</a>
                            <a class="list-group-item list-group-item-action" id="list-brands-section-list"
                                data-bs-toggle="tab" href="#brands_section" role="tab"
                                aria-controls="brands_section">Brands Section</a>
                            <a class="list-group-item list-group-item-action" id="list-footer-section-list"
                                data-bs-toggle="tab" href="#footer_section" role="tab"
                                aria-controls="footer_section">Footer Section</a>
                            <a class="list-group-item list-group-item-action" id="list-about-us-section-list"
                                data-bs-toggle="tab" href="#about_us_section" role="tab"
                                aria-controls="about_us_section">About Us Section</a>
                            <a class="list-group-item list-group-item-action" id="list-payment-section-list"
                                data-bs-toggle="tab" href="#payment_us_section" role="tab"
                                aria-controls="about_us_section">Payments</a>
                        </div>
                    </div>

                    <!-- Right Side - Form for Each Section -->
                    <div class="col-md-9 card">
                        <div class="tab-content card-body" id="nav-tabContent">
                            <!-- Website Settings Form -->
                            <!-- Website Settings Form -->
                            <div id="website_settings" class="tab-pane fade show active" role="tabpanel"
                                aria-labelledby="list-website-settings-list">
                                <h4>Website Settings</h4>
                                <form action="{{ route('admin.settings.update', 'website_settings') }}" method="POST"
                                    enctype="multipart/form-data">
                                    @csrf
                                    <div class="form-group">
                                        <label for="contact">Website Title</label>
                                        <input type="text" class="form-control" name="title"
                                            value="{{ $settings['title'] ?? '' }}">
                                    </div>
                                    <!-- Logo -->
                                    <div class="form-group">
                                        <label for="logo">Logo</label>
                                        <input type="file" class="form-control" name="logo">
                                        @if (isset($settings['logo']))
                                            <img src="{{ asset('uploads/settings/' . $settings['logo']) }}"
                                                alt="Website Logo" class="img-thumbnail mt-2" style="max-width: 150px;">
                                        @endif
                                    </div>

                                    <!-- Contact Information -->
                                    <div class="form-group">
                                        <label for="contact">Contact</label>
                                        <input type="text" class="form-control" name="contact"
                                            value="{{ $settings['contact'] ?? '' }}">
                                    </div>
                                    <div class="form-group">
                                        <label for="email">Email</label>
                                        <input type="email" class="form-control" name="email"
                                            value="{{ $settings['email'] ?? '' }}">
                                    </div>
                                    <div class="form-group">
                                        <label for="phone">Phone</label>
                                        <input type="text" class="form-control" name="phone"
                                            value="{{ $settings['phone'] ?? '' }}">
                                    </div>
                                    <div class="form-group">
                                        <label for="address">Address</label>
                                        <textarea class="form-control" name="address">{{ $settings['address'] ?? '' }}</textarea>
                                    </div>

                                    <!-- Opening Hours -->
                                    <div class="form-group">
                                        <label for="opening_hours">Opening Hours</label>
                                        <textarea class="form-control" name="opening_hours">{{ $settings['opening_hours'] ?? '' }}</textarea>
                                    </div>

                                    <!-- Social Media Links -->
                                    <div class="form-group">
                                        <label for="facebook">Facebook URL</label>
                                        <input type="text" class="form-control" name="facebook"
                                            value="{{ $settings['facebook'] ?? '' }}">
                                    </div>
                                    <div class="form-group">
                                        <label for="instagram">Instagram URL</label>
                                        <input type="text" class="form-control" name="instagram"
                                            value="{{ $settings['instagram'] ?? '' }}">
                                    </div>

                                    <!-- Register Texts -->
                                    <div class="form-group">
                                        <label for="register_student_text">Register Student Text</label>
                                        <textarea class="form-control" name="register_student_text">{{ $settings['register_student_text'] ?? '' }}</textarea>
                                    </div>
                                    <div class="form-group">
                                        <label for="register_teacher_text">Register Teacher Text</label>
                                        <textarea class="form-control" name="register_teacher_text">{{ $settings['register_teacher_text'] ?? '' }}</textarea>
                                    </div>

                                    <!-- Submit Button -->
                                    <button type="submit" class="btn btn-primary">Save</button>
                                </form>
                            </div>


                            <!-- Main Layout Form -->
                            <div id="main_layout" class="tab-pane fade" role="tabpanel"
                                aria-labelledby="list-main-layout-list">
                                <h4>Main Layout</h4>
                                <form action="{{ route('admin.settings.update', 'main_layout') }}" method="POST"
                                    enctype="multipart/form-data">
                                    @csrf
                                    <!-- Sliders Section -->
                                    <h5>Sliders</h5>
                                    @for ($i = 1; $i <= 3; $i++)
                                        <div class="form-group">
                                            <label for="slider_{{ $i }}_name">Slider {{ $i }}
                                                Name</label>
                                            <input type="text" class="form-control"
                                                name="slider_{{ $i }}_name"
                                                value="{{ $settings['slider_' . $i . '_name'] ?? '' }}">
                                        </div>
                                        <div class="form-group">
                                            <label for="slider_{{ $i }}_text">Slider {{ $i }}
                                                Text</label>
                                            <textarea class="form-control" name="slider_{{ $i }}_text">{{ $settings['slider_' . $i . '_text'] ?? '' }}</textarea>
                                        </div>
                                        <div class="form-group">
                                            <label for="slider_{{ $i }}_image">Slider {{ $i }}
                                                Image</label>
                                            <input type="file" class="form-control"
                                                name="slider_{{ $i }}_image">
                                            @if (isset($settings['slider_' . $i . '_image']))
                                                <img src="{{ asset('uploads/settings/' . $settings['slider_' . $i . '_image']) }}"
                                                    alt="Slider Image" class="img-thumbnail mt-2"
                                                    style="max-width: 150px;">
                                            @endif
                                        </div>
                                        <hr>
                                    @endfor

                                    <!-- Services Section -->
                                    <h5>Services</h5>
                                    @for ($i = 1; $i <= 3; $i++)
                                        <div class="form-group">
                                            <label for="service_{{ $i }}_name">Service {{ $i }}
                                                Name</label>
                                            <input type="text" class="form-control"
                                                name="service_{{ $i }}_name"
                                                value="{{ $settings['service_' . $i . '_name'] ?? '' }}">
                                        </div>
                                        <div class="form-group">
                                            <label for="service_{{ $i }}_image">Service {{ $i }}
                                                Image</label>
                                            <input type="file" class="form-control"
                                                name="service_{{ $i }}_image">
                                            @if (isset($settings['service_' . $i . '_image']))
                                                <img src="{{ asset('uploads/settings/' . $settings['service_' . $i . '_image']) }}"
                                                    alt="Service Image" class="img-thumbnail mt-2"
                                                    style="max-width: 150px;">
                                            @endif
                                        </div>
                                        <hr>
                                    @endfor

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

                            <!-- Brands Section Form -->
                            <div id="brands_section" class="tab-pane fade" role="tabpanel"
                                aria-labelledby="list-brands-section-list">
                                <h4>Brands Section</h4>

                                <!-- Display success message -->
                                @if (session('success'))
                                    <div class="alert alert-success">{{ session('success') }}</div>
                                @endif

                                <!-- Form to add a new brand -->
                                <form action="{{ route('brands.store') }}" method="POST" enctype="multipart/form-data">
                                    @csrf
                                    <div class="form-group">
                                        <label for="name">Brand Name</label>
                                        <input type="text" class="form-control" name="name" required>
                                    </div>
                                    <div class="form-group">
                                        <label for="logo">Brand Logo</label>
                                        <input type="file" class="form-control" name="logo">
                                    </div>
                                    <button type="submit" class="btn btn-primary">Add Brand</button>
                                </form>

                                <hr>

                                <!-- List of existing brands -->
                                <h5>Existing Brands</h5>
                                @if ($brands->isEmpty())
                                    <p>No brands added yet.</p>
                                @else
                                    <table class="table table-bordered">
                                        <thead>
                                            <tr>
                                                <th>Logo</th>
                                                <th>Name</th>
                                                <th>Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($brands as $brand)
                                                <tr>
                                                    <td>
                                                        @if ($brand->logo)
                                                            <img src="{{ asset('uploads/brands/' . $brand->logo) }}"
                                                                alt="{{ $brand->name }}" style="max-width: 100px;">
                                                        @else
                                                            No logo
                                                        @endif
                                                    </td>
                                                    <td>{{ $brand->name }}</td>
                                                    <td>
                                                        <form action="{{ route('brands.destroy', $brand->id) }}"
                                                            method="POST" style="display: inline-block;">
                                                            @csrf
                                                            @method('DELETE')
                                                            <button type="submit" class="btn btn-sm btn-danger"
                                                                onclick="return confirm('Are you sure you want to delete this brand?')">Delete</button>
                                                        </form>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                @endif
                            </div>

                            <!-- Footer Section Form -->
                            <div id="footer_section" class="tab-pane fade" role="tabpanel"
                                aria-labelledby="list-footer-section-list">
                                <h4>Footer Section</h4>
                                <form action="{{ route('admin.settings.update', 'footer_section') }}" method="POST"
                                    enctype="multipart/form-data">
                                    @csrf
                                    <div class="form-group">
                                        <label for="footer_logo">Footer Logo</label>
                                        <input type="file" class="form-control" name="footer_logo">
                                        @if (isset($settings['footer_logo']))
                                            <img src="{{ asset('uploads/settings/' . $settings['footer_logo']) }}"
                                                alt="Footer Logo" class="img-thumbnail mt-2" style="max-width: 150px;">
                                        @endif
                                    </div>
                                    <div class="form-group">
                                        <label for="footer_text">Footer Text</label>
                                        <textarea class="form-control" name="footer_text">{{ $settings['footer_text'] ?? '' }}</textarea>
                                    </div>
                                    <button type="submit" class="btn btn-primary">Save</button>
                                </form>
                            </div>

                            <!-- About Us Section Form -->
                            <!-- About Us Section Form -->
                            <!-- About Us Section Form -->
                            <div id="about_us_section" class="tab-pane fade" role="tabpanel"
                                aria-labelledby="list-about-us-section-list">
                                <h4>About Us Section</h4>
                                <form action="{{ route('admin.settings.update', 'about_us_section') }}" method="POST">
                                    @csrf
                                    <div class="form-group">
                                        <label for="about_us_title">About Us Title</label>
                                        <input type="text" class="form-control" name="about_us_title"
                                            value="{{ $settings['about_us_title'] ?? '' }}">
                                    </div>
                                    <div class="form-group">
                                        <label for="about_us_description">About Us Description</label>
                                        <textarea class="form-control rich-text" name="about_us_description">{{ $settings['about_us_description'] ?? '' }}</textarea>
                                    </div>
                                    <button type="submit" class="btn btn-primary">Save</button>
                                </form>
                            </div>



                            <div id="payment_us_section" class="tab-pane fade" role="tabpanel"
                                aria-labelledby="list-about-us-section-list">
                                <h4>Payment Settings</h4>
                                <form action="{{ route('admin.settings.update', 'payment_us_section') }}" method="POST">
                                    @csrf
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="currency">Currency (Please enter the symbol i.e $,pkr)</label>
                                                <input type="text" class="form-control" name="currency"
                                                    value="{{ $settings['currency'] ?? '' }}">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row mt-2">
                                        <div class="col-4">
                                            <div class="card">
                                                <div class="card-body">
                                                    <div class="col-md-12"
                                                        style="background: aliceblue;padding: 5px;text-align: center;">
                                                        <h3>EasyPesa Method</h3>
                                                    </div>
                                                    <div class="col-md-12 mt-4">
                                                        <label>Allow Method</label>
                                                        <input type="checkbox" name="easy_pesa_status" value="1" @if(isset($settings['easy_pesa_status']) && $settings['easy_pesa_status'] == 1) checked @endif/>
                                                    </div>
                                                    <div class="col-md-12 mt-4">
                                                        <label>Easypesa Account Title</label>
                                                        <input class="form-control" type="text"
                                                            name="easy_pesa_account_title" value="{{ $settings['easy_pesa_account_title'] ?? '' }}"/>
                                                    </div>
                                                    <div class="col-md-12 mt-4">
                                                        <label>Easypesa Account Number</label>
                                                        <input class="form-control" type="text"
                                                            name="easy_pesa_account_number" value="{{ $settings['easy_pesa_account_number'] ?? '' }}"/>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-4">
                                            <div class="card">
                                                <div class="card-body">
                                                    <div class="col-md-12"
                                                        style="background: aliceblue;padding: 5px;text-align: center;">
                                                        <h3>Bank Transfer Method</h3>
                                                    </div>
                                                    <div class="col-md-12 mt-4">
                                                        <label>Allow Method</label>
                                                        <input type="checkbox" name="bank_status" value="1" @if(isset($settings['bank_status']) && $settings['bank_status'] == 1) checked @endif/>
                                                    </div>
                                                    <div class="col-md-12 mt-4">
                                                        <label>Bank Account Title</label>
                                                        <input class="form-control" type="text"
                                                            name="bank_account_title" value="{{ $settings['bank_account_title'] ?? '' }}"/>
                                                    </div>
                                                    <div class="col-md-12 mt-4">
                                                        <label>Bank Account Number</label>
                                                        <input class="form-control" type="text"
                                                            name="bank_account_number" value="{{ $settings['bank_account_number'] ?? '' }}"/>
                                                    </div>
                                                    <div class="col-md-12 mt-4">
                                                        <label>Bank Name</label>
                                                        <input class="form-control" type="text"
                                                            name="bank_name" value="{{ $settings['bank_name'] ?? '' }}"/>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <button type="submit" class="btn btn-primary">Save</button>
                                </form>
                            </div>




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

@section('scripts')
    <!-- Ensure Bootstrap JS and Popper.js are loaded -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>

    <script>
        // Handle tab switching
        document.querySelectorAll('.list-group-item').forEach(item => {
            item.addEventListener('click', function(e) {
                e.preventDefault();
                document.querySelectorAll('.list-group-item').forEach(tab => tab.classList.remove(
                    'active'));
                item.classList.add('active');

                let tabPane = document.querySelector(item.getAttribute('href'));
                document.querySelectorAll('.tab-pane').forEach(pane => pane.classList.remove('show',
                    'active'));
                tabPane.classList.add('show', 'active');
            });
        });
    </script>
@section('scripts')
    <script src="https://cdn.ckeditor.com/4.16.2/standard/ckeditor.js"></script>
    <script>
        CKEDITOR.replace('about_us_description');
    </script>
@endsection
@endsection