@extends('web.home.layout.master')

@section('content')
    <div class="csr-page py-5">
        <div class="container-fluid" style="padding-left:3%;padding-right:3%">
            <!-- Premium Hero Section -->
            <div class="csr-hero position-relative overflow-hidden rounded-5 mb-5 shadow-lg">
                <div class="hero-overlay"></div>
                <div class="row align-items-center position-relative z-1 p-4 p-md-5">
                    <div class="col-lg-7 text-white">
                        <div
                            class="badge bg-light text-success mb-3 px-3 py-2 rounded-pill fw-bold animate__animated animate__fadeInDown">
                            <i class="fa fa-leaf me-2"></i>Sustainably Made
                        </div>
                        <h1 class="display-3 fw-bold mb-3 animate__animated animate__fadeInLeft">Green Cycle <span
                                class="text-warning">Rewards</span></h1>
                        <p class="lead mb-4 fs-4 opacity-90 animate__animated animate__fadeInLeft animate__delay-1s"
                            style="color:#ffffff">
                            Revolutionizing recycling. Return your used American Plastic products and earn exclusive rewards
                            for saving the planet.
                        </p>

                        <div class="hero-actions animate__animated animate__fadeInUp animate__delay-2s">
                            @if(Auth::check())
                                <div class="user-stats-card glass-morphism p-3 d-inline-flex align-items-center">
                                    <div class="stat-icon bg-success bg-opacity-25 rounded-circle p-3 me-3">
                                        <i class="fa fa-leaf text-success fs-4"></i>
                                    </div>
                                    <div class="stat-info">
                                        <span class="d-block  small text-uppercase fw-bold ls-1" style="color:#000000">Your
                                            Portfolio</span>
                                        <span class="h4 fw-bold mb-0 " style="color:#000000">{{ number_format($userPoints, 2) }}
                                            <small class="fs-6" style="color:#000000">Points</small></span>
                                    </div>
                                </div>
                            @else
                                <button type="button"
                                    class="btn btn-warning btn-lg rounded-pill px-5 py-3 fw-bold shadow-sm hover-lift login-trigger-btn">
                                    <i class="fa fa-sign-in me-2"></i>Login to Start Earning
                                </button>
                            @endif
                        </div>
                    </div>
                    <div class="col-lg-5 d-none d-lg-block text-center animate__animated animate__zoomIn">
                        <div class="floating-recycle-icon">
                            <i class="fa fa-recycle text-white opacity-20 d-block" style="font-size: 15rem;"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Progress Steps -->
            <div class="row g-4 mb-5 justify-content-center">
                <div class="col-md-4">
                    <div
                        class="step-card border-0 shadow-sm glass-morphism h-100 rounded-4 overflow-hidden text-center p-4">
                        <div class="step-number">01</div>
                        <div class="icon-wrapper mb-4">
                            <div
                                class="icon-bg bg-success bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center">
                                <i class="fa fa-cubes text-success fs-2"></i>
                            </div>
                        </div>
                        <h4 class="fw-bold mb-3">Sort & Collect</h4>
                        <p class="text-muted">Gather your used American Plastic containers and products. Ensure they are
                            clean and sorted.</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div
                        class="step-card border-0 shadow-sm glass-morphism h-100 rounded-4 overflow-hidden text-center p-4">
                        <div class="step-number">02</div>
                        <div class="icon-wrapper mb-4">
                            <div
                                class="icon-bg bg-primary bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center">
                                <i class="fa fa-paper-plane-o text-primary fs-2"></i>
                            </div>
                        </div>
                        <h4 class="fw-bold mb-3">Request Pickup</h4>
                        <p class="text-muted">Fill out the digital request form below. Attach photos and details of your
                            collection.</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div
                        class="step-card border-0 shadow-sm glass-morphism h-100 rounded-4 overflow-hidden text-center p-4">
                        <div class="step-number">03</div>
                        <div class="icon-wrapper mb-4">
                            <div
                                class="icon-bg bg-warning bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center">
                                <i class="fa fa-gift text-warning fs-2"></i>
                            </div>
                        </div>
                        <h4 class="fw-bold mb-3">Earn Points</h4>
                        <p class="text-muted">Receive eco-points after verification. Redeem them for discounts on your next
                            eco-friendly purchase.</p>
                    </div>
                </div>
            </div>

            @if(Auth::check())
                <div class="row g-5 mt-4">
                    <!-- Form Section -->
                    <div class="col-lg-8">
                        <div class="card border-0 shadow-lg rounded-5 overflow-hidden">
                            <div class="card-header bg-dark p-4 border-0">
                                <h3 class="card-title text-white mb-0 fw-bold">
                                    <i class="fa fa-hand-grab-o text-success me-2"></i>Recycling Submission
                                </h3>
                            </div>
                            <div class="card-body p-5">
                                <form id="recyclingForm" enctype="multipart/form-data">
                                    @csrf
                                    <div class="row g-4">
                                        <div class="col-12 mb-2">
                                            <label class="form-label fw-bold text-dark d-flex align-items-center mb-3">
                                                <i class="fa fa-exchange text-muted me-2"></i>Submission Mode
                                            </label>
                                            <div class="btn-group w-100" role="group" aria-label="Submission Mode">
                                                <input type="radio" class="btn-check" name="submission_mode" id="modeCatalog"
                                                    autocomplete="off" checked value="catalog">
                                                <label class="btn btn-outline-success py-3 fw-bold rounded-start-4"
                                                    for="modeCatalog">
                                                    <i class="fa fa-list-ul me-2"></i>Choose from Catalog
                                                </label>

                                                <input type="radio" class="btn-check" name="submission_mode" id="modeCustom"
                                                    autocomplete="off" value="custom">
                                                <label class="btn btn-outline-success py-3 fw-bold rounded-end-4"
                                                    for="modeCustom">
                                                    <i class="fa fa-pencil me-2"></i>Type Custom Product
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-12 mb-2" id="catalogProductGroup">
                                            <label class="form-label fw-bold text-dark d-flex align-items-center">
                                                <i class="fa fa-tag text-muted me-2"></i>Select Product & Color
                                            </label>
                                            <select name="product_color_id" id="productColorSelect"
                                                class="form-select form-select-lg rounded-4 border-2 p-2 shadow-none" required>
                                                <option value="">-- Select Catalog Product --</option>
                                                @foreach($products as $productcolor)
                                                    <option value="{{ $productcolor->id }}">
                                                        {{ $productcolor->product->product_name ?? 'N/A' }} -
                                                        {{ $productcolor->color_name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-12 mb-2" id="customProductGroup" style="display: none;">
                                            <label class="form-label fw-bold text-dark d-flex align-items-center">
                                                <i class="fa fa-pencil-square-o text-muted me-2"></i>Product Name / Details
                                            </label>
                                            <input type="text" name="product_name"
                                                class="form-control form-control-lg rounded-4 border-2 p-3 shadow-none"
                                                placeholder="Type product name or category details here..."
                                                id="productNameInput">
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label fw-bold text-dark d-flex align-items-center">
                                                <i class="fa fa-hashtag text-muted me-2"></i>Quantity (Units)
                                            </label>
                                            <input type="number" name="quantity"
                                                class="form-control form-control-lg rounded-4 border-2 p-3 shadow-none" min="1"
                                                value="1" required id="quantityInput">
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label fw-bold text-dark d-flex align-items-center">
                                                <i class="fa fa-calculator text-muted me-2"></i>Expected Reward
                                            </label>
                                            <div
                                                class="points-display-box rounded-4 border-2 p-2 px-3 bg-light d-flex align-items-center justify-content-between h-100">
                                                <span class="fs-5 text-success fw-bold"><i class="fa fa-leaf me-1"></i> <span
                                                        id="estimatedPointsDisplay">Pending</span></span>
                                                <span class="text-muted small">Pts Reward</span>
                                                <input type="hidden" id="estimatedPoints" value="0">
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <label class="form-label fw-bold text-dark d-flex align-items-center">
                                                <i class="fa fa-camera text-muted me-2"></i>Upload Photo Evidence
                                            </label>
                                            <div
                                                class="upload-zone rounded-4 border-2 border-dashed p-4 text-center position-relative">
                                                <input type="file" name="image"
                                                    class="form-control position-absolute opacity-0 w-100 h-100 top-0 start-0 cursor-pointer"
                                                    id="imageInput" accept="image/*">
                                                <div id="uploadPreview" class="d-none mb-3">
                                                    <img src="#" class="img-thumbnail rounded-3" style="max-height: 150px;">
                                                </div>
                                                <div id="uploadPlaceholder">
                                                    <i class="fa fa-cloud-upload text-success display-4 mb-2"></i>
                                                    <p class="mb-0 text-muted">Click or drag image to upload products photo</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <label class="form-label fw-bold text-dark d-flex align-items-center">
                                                <i class="fa fa-commenting-o text-muted me-2"></i>Additional Details
                                            </label>
                                            <textarea name="user_note" class="form-control rounded-4 border-2 p-3 shadow-none"
                                                rows="4"
                                                placeholder="Mention any specific condition or collection details..."></textarea>
                                        </div>
                                        <div class="col-12 mt-5">
                                            <button type="submit"
                                                class="btn btn-success btn-lg w-100 rounded-pill py-3 fw-bold shadow-lg submit-btn">
                                                <span class="default-state"><i class="fa fa-paper-plane me-2"></i>Send Request
                                                    for Approval</span>
                                                <span class="loading-state d-none"><span
                                                        class="spinner-border spinner-border-sm me-2"></span>Processing...</span>
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                    <!-- Stats & History Side -->
                    <div class="col-lg-4">
                        <div class="sticky-top" style="top: 100px;">
                            <div class="card border-0 shadow-lg rounded-5 bg-dark p-4 text-white mb-4">
                                <h4 class="fw-bold mb-4 border-bottom border-secondary pb-3">Eco Dashboard</h4>
                                <div class="d-flex align-items-center mb-4">
                                    <div class="bg-success rounded-circle p-3 me-3 box-shadow-green">
                                        <i class="fa fa-leaf fs-3"></i>
                                    </div>
                                    <div>
                                        <small class="text-uppercase d-block mb-1 ls-1" style="color:#fffffff">Total
                                            Points</small>
                                        <h3 class="fw-bold mb-0 text-success" style="color:#000000">
                                            {{ number_format($userPoints, 2) }}</h3>
                                    </div>
                                </div>
                                <div class="row g-2 text-center">
                                    <div class="col-6">
                                        <div class="bg-white bg-opacity-10 rounded-4 p-3 h-100">
                                            <small class=" d-block mb-1" style="color:#000000">Approved</small>
                                            <span
                                                class="h5 fw-bold text-success">{{ $recentRequests->whereIn('status', ['approved', 'completed'])->count() }}</span>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="bg-white bg-opacity-10 rounded-4 p-3 h-100">
                                            <small class=" d-block mb-1" style="color:#000000">Pending</small>
                                            <span
                                                class="h5 fw-bold text-warning">{{ $recentRequests->whereIn('status', ['pending', 'collecting'])->count() }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="card border-0 shadow-lg rounded-5 p-4 bg-white">
                                <h4 class="fw-bold mb-4">Recent History</h4>
                                <div class="request-timeline">
                                    @forelse($recentRequests as $request)
                                        <div class="timeline-item d-flex mb-4">
                                            <div class="timeline-marker me-3 position-relative">
                                                <div
                                                    class="marker-dot bg-{{ in_array($request->status, ['approved', 'completed']) ? 'success' : ($request->status == 'collecting' ? 'info' : ($request->status == 'rejected' ? 'danger' : 'warning')) }}">
                                                </div>
                                            </div>
                                            <div class="timeline-content flex-grow-1">
                                                <div class="d-flex justify-content-between align-items-center mb-1">
                                                    <h6 class="fw-bold mb-0 text-dark">
                                                        {{ $request->product_name ?? ($request->productcolor->product->product_name ?? 'N/A') }}
                                                    </h6>
                                                    <span
                                                        class="badge text-{{ in_array($request->status, ['approved', 'completed']) ? 'success' : ($request->status == 'collecting' ? 'info' : ($request->status == 'rejected' ? 'danger' : 'warning')) }} bg-transparent fw-normal p-0">{{ ucfirst($request->status) }}</span>
                                                </div>
                                                <div class="d-flex justify-content-between">
                                                    <small class="text-muted">{{ $request->created_at->diffForHumans() }}</small>
                                                    <span
                                                        class="text-success small fw-bold">+{{ number_format($request->total_points, 2) }}
                                                        Pts</span>
                                                </div>
                                            </div>
                                        </div>
                                    @empty
                                        <div class="text-center py-5">
                                            <div class="empty-icon text-muted opacity-25 mb-3">
                                                <i class="fa fa-history display-4"></i>
                                            </div>
                                            <p class="text-muted">No recycling activity yet.</p>
                                        </div>
                                    @endforelse
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @else
                <!-- Guest View CTA -->
                <div class="text-center py-5 mt-5 glass-morphism rounded-5 p-5">
                    <i class="fa fa-lock text-success fs-1 mb-3 opacity-50"></i>
                    <h2 class="fw-bold mb-3">Ready to Join the Movement?</h2>
                    <p class="text-muted mb-4 mx-auto" style="max-width: 600px;">Log in to access your recycling dashboard,
                        track your contributions, and start converting your used products into real store rewards.</p>
                    <button
                        class="btn btn-success btn-lg rounded-pill px-5 py-3 fw-bold login-trigger-btn shadow-lg hover-lift">
                        Access Member Dashboard
                    </button>
                </div>
            @endif
        </div>
    </div>

    <style>
        @import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css');

        .csr-page {
            overflow-x: hidden;
            background-color: #fcfdfc;
        }

        .csr-hero {
            background: radial-gradient(circle at 10% 20%, rgb(43, 91, 54) 0%, rgb(24, 51, 31) 90.1%);
            min-height: 400px;
        }

        .hero-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g fill="%23ffffff" fill-opacity="0.05" fill-rule="evenodd"><circle cx="3" cy="3" r="3"/><circle cx="13" cy="13" r="3"/></g></svg>');
            opacity: 0.1;
        }

        .glass-morphism {
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 20px;
        }

        .user-stats-card.glass-morphism {
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .ls-1 {
            letter-spacing: 1px;
        }

        .step-card {
            position: relative;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            border: 1px solid #f0f0f0 !important;
        }

        .step-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08) !important;
            border-color: #85c226 !important;
        }

        .step-number {
            position: absolute;
            top: 20px;
            right: 20px;
            font-size: 3rem;
            font-weight: 800;
            opacity: 0.05;
            line-height: 1;
        }

        .icon-wrapper .icon-bg {
            width: 80px;
            height: 80px;
        }

        /* Floating animation */
        .floating-recycle-icon {
            animation: float 6s ease-in-out infinite;
        }

        @keyframes float {
            0% {
                transform: translatey(0px) rotate(0deg);
            }

            50% {
                transform: translatey(-20px) rotate(5deg);
            }

            100% {
                transform: translatey(0px) rotate(0deg);
            }
        }

        .box-shadow-green {
            box-shadow: 0 10px 20px rgba(46, 204, 113, 0.4);
        }

        .border-dashed {
            border-style: dashed !important;
        }

        .upload-zone {
            transition: all 0.3s ease;
            background: #fafafa;
            min-height: 200px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .upload-zone:hover {
            background: #f1faf3;
            border-color: #2ecc71 !important;
        }

        .cursor-pointer {
            cursor: pointer;
        }

        .hover-lift {
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .hover-lift:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
        }

        /* Timeline Styling */
        .timeline-marker {
            width: 20px;
            display: flex;
            justify-content: center;
        }

        .timeline-marker::after {
            content: '';
            position: absolute;
            top: 15px;
            bottom: -30px;
            width: 2px;
            background: #eee;
            z-index: 0;
        }

        .timeline-item:last-child .timeline-marker::after {
            display: none;
        }

        .marker-dot {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            margin-top: 5px;
            z-index: 1;
            border: 2px solid #fff;
            box-shadow: 0 0 0 1px #eee;
        }

        .fw-600 {
            font-weight: 600;
        }

        /* Sticky handling */
        @media (max-width: 991.98px) {
            .sticky-top {
                position: static !important;
            }
        }
    </style>

    <script>
        $(document).ready(function () {
            // Login Modal Trigger
            $('.login-trigger-btn').on('click', function (e) {
                e.preventDefault();
                $('#loginmodal').modal('show');
            });

            // Points calculation logic and toggling input fields
            function updatePoints() {
                const mode = $('input[name="submission_mode"]:checked').val();
                if (mode === 'catalog') {
                    $('#estimatedPointsDisplay').text('0.15 Pts / g');
                } else {
                    $('#estimatedPointsDisplay').text('0.10 Pts / g');
                }
                $('#estimatedPoints').val(0);
            }

            $('input[name="submission_mode"]').on('change', function () {
                const mode = $(this).val();
                if (mode === 'catalog') {
                    $('#catalogProductGroup').show();
                    $('#productColorSelect').prop('required', true);
                    $('#customProductGroup').hide();
                    $('#productNameInput').prop('required', false).val('');
                } else {
                    $('#catalogProductGroup').hide();
                    $('#productColorSelect').prop('required', false).val('');
                    $('#customProductGroup').show();
                    $('#productNameInput').prop('required', true);
                }
                updatePoints();
            });

            $('#productColorSelect').on('change', updatePoints);
            $('#quantityInput').on('change input', updatePoints);

            // Initial trigger
            updatePoints();

            // Image preview logic
            $('#imageInput').on('change', function () {
                const file = this.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function (e) {
                        $('#uploadPreview img').attr('src', e.target.result);
                        $('#uploadPreview').removeClass('d-none');
                        $('#uploadPlaceholder').addClass('d-none');
                    };
                    reader.readAsDataURL(file);
                }
            });

            // Form submission
            $('#recyclingForm').on('submit', function (e) {
                e.preventDefault();

                const formData = new FormData(this);
                const submitBtn = $(this).find('.submit-btn');

                submitBtn.prop('disabled', true);
                submitBtn.find('.default-state').addClass('d-none');
                submitBtn.find('.loading-state').removeClass('d-none');

                $.ajax({
                    url: "{{ route('american.plastic.web.csr.submit') }}",
                    type: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (response) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Request Sent!',
                            text: response.message,
                            confirmButtonColor: '#28a745',
                            customClass: {
                                popup: 'rounded-5'
                            }
                        }).then(() => {
                            location.reload();
                        });
                    },
                    error: function (xhr) {
                        let msg = 'Something went wrong. Please try again.';
                        if (xhr.status === 401) {
                            msg = 'Your session has expired. Please login again.';
                            $('#loginmodal').modal('show');
                        } else if (xhr.responseJSON && xhr.responseJSON.message) {
                            msg = xhr.responseJSON.message;
                        }

                        Swal.fire({
                            icon: 'error',
                            title: 'Submission Failed',
                            text: msg,
                            confirmButtonColor: '#dc3545'
                        });

                        submitBtn.prop('disabled', false);
                        submitBtn.find('.default-state').removeClass('d-none');
                        submitBtn.find('.loading-state').addClass('d-none');
                    }
                });
            });
        });
    </script>
@endsection