@extends('admin.admin_dashboard')
@section('admin')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>

<div class="page-content">
    <!-- Breadcrumb -->
  <div class="page-breadcrumb d-flex align-items-center mb-4" style="background: linear-gradient(135deg, #007bff, #0056b3); padding: 15px; border-radius: 8px;">
    <div class="ps-3 d-flex align-items-center">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0 p-0" style="font-size: 1.1rem; color: #fff;">
                <li class="breadcrumb-item d-flex align-items-center">
                    <a href="{{ route('admin.dashboard') }}" class="breadcrumb-icon text-white" style="transition: transform 0.3s ease; display: flex; align-items: center;">
                        <i class="bx bx-home-alt" style="font-size: 1.5rem;"></i>
                    </a>
                </li>
                <li class="breadcrumb-item active text-muted" aria-current="page" style="display: flex; align-items: center;">
                    <span class="text-white">Site Settings</span>
                </li>
            </ol>
        </nav>
    </div>
</div>

    <!-- End Breadcrumb -->

    <!-- Card for Site Settings -->
    <div class="card glass-card border-0 shadow-lg">
        <div class="card-body p-5">
            <!-- Section Title -->
            <h3 class="fw-bold text-center text-gradient mb-4" style="font-size: 2rem; color: #007bff;">
                🕸️ Site Settings
            </h3>
            <p class="text-center text-muted mb-4">Manage your site's information, logo, and banner.</p>

            <!-- Form to update Site Settings -->
            <form id="myForm" action="{{ route('update.site') }}" method="post" class="row g-4" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="id" value="{{ $site->id }}">

                <!-- Support Email -->
                <div class="form-group col-md-6">
                    <label for="support_email" class="form-label fw-bold text-dark">
                        <i class="bx bx-mail-send"></i> Support Email
                    </label>
                    <input type="email" name="support_email" class="form-control custom-input" id="support_email" value="{{ $site->support_email }}">
                </div>

                <!-- Social Media Links (Youtube, Facebook, Instagram) -->
                <div class="form-group col-md-6">
                    <label for="youtube" class="form-label fw-bold text-dark">
                        <i class="bx bxl-youtube"></i> Youtube Channel
                    </label>
                    <input type="text" name="youtube" class="form-control custom-input" id="youtube" value="{{ $site->youtube }}">
                </div>

                <div class="form-group col-md-6">
                    <label for="facebook" class="form-label fw-bold text-dark">
                        <i class="bx bxl-facebook"></i> Facebook
                    </label>
                    <input type="text" name="facebook" class="form-control custom-input" id="facebook" value="{{ $site->facebook }}">
                </div>

                <div class="form-group col-md-6">
                    <label for="instagram" class="form-label fw-bold text-dark">
                        <i class="bx bxl-instagram"></i> Instagram
                    </label>
                    <input type="text" name="instagram" class="form-control custom-input" id="instagram" value="{{ $site->instagram }}">
                </div>

                <!-- Website and Banner Link -->
                <div class="form-group col-md-6">
                    <label for="website" class="form-label fw-bold text-dark">
                        <i class="bx bx-globe"></i> Website
                    </label>
                    <input type="text" name="website" class="form-control custom-input" id="website" value="{{ $site->website }}">
                </div>

                <div class="form-group col-md-6">
                    <label for="banner_link" class="form-label fw-bold text-dark">
                        <i class="bx bx-link-alt"></i> Banner Link
                    </label>
                    <input type="text" name="banner_link" class="form-control custom-input" id="banner_link" value="{{ $site->banner_link }}">
                </div>

                <!-- Copyright and Version -->
                <div class="form-group col-md-6">
                    <label for="copyright" class="form-label fw-bold text-dark">
                        <i class="bx bx-copyright"></i> Version
                    </label>
                    <input type="text" name="copyright" class="form-control custom-input" id="copyright" value="{{ $site->copyright }}">
                </div>

                <div class="form-group col-md-6">
                </div>

                <!-- File Uploads (Logo & Banner) -->
                <div class="form-group col-md-6 d-flex align-items-center">
                    <label for="logo" class="form-label fw-bold text-dark">
                        <i class="bx bx-image"></i> Logo
                    </label>
                    <input type="file" name="logo" class="form-control custom-input" id="logo">
                </div>

                <div class="form-group col-md-6">
<<<<<<< HEAD
                  <img id="showImage" src="{{ (!empty($site->logo)) ? url('upload/logo/'.$site->logo) : url('upload/no_image.jpg') }}" alt="Logo" class="rounded-full p-1 bg-gray-100 border ms-3" width="80">
=======
                  <img id="showImage" src="{{ (!empty($site->logo)) ? url('upload/logo/'.$site->logo) : url('upload/no_image.jpg') }}" alt="Logo" class="chm-brand-preview ms-3">
>>>>>>> origin/main
                </div>

               

                <div class="form-group col-md-6 d-flex align-items-center">
                    <label for="login_banner" class="form-label fw-bold text-dark">
                        <i class="bx bx-image-alt"></i> Banner
                    </label>
                    <input type="file" name="login_banner"  class="form-control custom-input" id="login_banner">
                 </div>

                <div class="form-group col-md-6">
<<<<<<< HEAD
                       <img id="showImageBanner" src="{{ (!empty($site->login_banner)) ? url('upload/banner/'.$site->login_banner) : url('upload/no_image.jpg') }}" alt="Banner" class="rounded-lg p-1 bg-gray-100 border ms-3" width="80">
=======
                       <img id="showImageBanner" src="{{ (!empty($site->login_banner)) ? url('upload/banner/'.$site->login_banner) : url('upload/no_image.jpg') }}" alt="Banner" class="chm-brand-preview-banner ms-3">
>>>>>>> origin/main
                </div>

                <!-- Submit Button -->
                <div class="col-md-12 text-center">
                    <button type="submit" class="btn save-btn">
                        <i class="bx bx-save" style="font-size: 1.4rem;"></i> Save Changes
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Custom Styles for Enhanced UI/UX -->
<style>
    /* Glassmorphism Effect */
    .glass-card {
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(12px);
        border-radius: 16px;
        padding: 25px;
        box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.15);
        transition: all 0.3s ease-in-out;
    }

    .glass-card:hover {
        transform: scale(1.03);
        box-shadow: 0px 18px 36px rgba(0, 0, 0, 0.2);
    }

    /* Custom Input & Select2 Styling */
    .custom-input {
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.3);
        padding: 14px;
        font-size: 1rem;
        background: rgba(255, 255, 255, 0.85);
        transition: all 0.3s ease-in-out;
        height: 50px;
    }

    .custom-input:focus {
        border-color: #007bff;
        box-shadow: 0px 0px 12px rgba(0, 123, 255, 0.5);
    }

    /* Save Button */
    .save-btn {
        background: linear-gradient(135deg, #007bff, #0056b3);
        border: none;
        border-radius: 12px;
        padding: 14px 28px;
        font-size: 1.2rem;
        font-weight: bold;
        color: white;
        text-transform: uppercase;
        transition: all 0.3s ease-in-out;
        position: relative;
        overflow: hidden;
        box-shadow: 0px 6px 16px rgba(0, 123, 255, 0.4);
    }

    .save-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0px 12px 28px rgba(0, 123, 255, 0.5);
    }

    /* Image Previews */
    .rounded-full {
        border-radius: 50%;
    }

    .rounded-lg {
        border-radius: 12px;
    }

    .d-flex {
        display: flex;
        align-items: center;
    }

    .ms-3 {
        margin-left: 1rem;
    }

    /* Heading Styling */
    .text-gradient {
        background: linear-gradient(to left, #fca311, #6a1b9a);
        -webkit-background-clip: text;
        color: transparent;
    }
</style>

<script>
    $(document).ready(function() {
        // Image Preview on File Select
        $('#logo').change(function(e){
            var reader = new FileReader();
            reader.onload = function(e){
                $('#showImage').attr('src', e.target.result);
            }
            reader.readAsDataURL(e.target.files[0]);
        });

        $('#login_banner').change(function(e){
            var reader = new FileReader();
            reader.onload = function(e){
                $('#showImageBanner').attr('src', e.target.result);
            }
            reader.readAsDataURL(e.target.files[0]);
        });
    });
</script>

@endsection