@extends('backend.template.layouts.template-base')
@section('title', 'Subscriber - subscriber-detail')

@section('content')
    <section>
        <div class="page-head-title1 mb-4">
            <div class="d-flex align-items-center justify-content-between mt-2">
                <a href="{{ route('backend.template.subscriber.index') }}" class="d-inline-block">
                    <h2 class="text-title fw-semibold mb-0 d-flex align-items-center "><i
                            class="ri-arrow-left-s-line fs-1 me-2"></i>Subscriber Details
                    </h2>
                </a>

            </div>
        </div>


        <div class="product-card1 product-card-responsive d-flex align-items-center justify-content-between">

            <!-- LEFT SIDE -->
            <div class="product-left-section d-flex align-items-center gap-3 ">

                <!-- Image -->
                <div class="product-img">
                    <img src="{{ asset('backend/template/svg-icon/product-image-dark.svg') }}" alt="">
                </div>

                <!-- Content -->
                <div>
                    <h5 class="product-name mb-1">Subscriber X</h5>

                    <p class="product-desc mb-1">
                        SID001 | Last Plan Active on : 00/00/0000 |
                        <span><svg width="12" height="12" viewBox="0 0 12 12" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <mask id="mask0_1897_9867" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0"
                                    y="0" width="12" height="12">
                                    <path d="M12 0H0V12H12V0Z" fill="white" />
                                </mask>
                                <g mask="url(#mask0_1897_9867)">
                                    <path
                                        d="M5.525 7.475L4.6 8.4C4.405 8.595 4.095 8.595 3.895 8.405C3.84 8.35 3.785 8.3 3.73 8.245C3.215 7.725 2.75 7.18 2.335 6.61C1.925 6.04 1.595 5.47 1.355 4.905C1.12 4.335 1 3.79 1 3.27C1 2.93 1.06 2.605 1.18 2.305C1.3 2 1.49 1.72 1.755 1.47C2.075 1.155 2.425 1 2.795 1C2.935 1 3.075 1.03 3.2 1.09C3.33 1.15 3.445 1.24 3.535 1.37L4.695 3.005C4.785 3.13 4.85 3.245 4.895 3.355C4.94 3.46 4.965 3.565 4.965 3.66C4.965 3.78 4.93 3.9 4.86 4.015C4.795 4.13 4.7 4.25 4.58 4.37L4.2 4.765C4.145 4.82 4.12 4.885 4.12 4.965C4.12 5.005 4.125 5.04 4.135 5.08C4.15 5.12 4.165 5.15 4.175 5.18C4.265 5.345 4.42 5.56 4.64 5.82C4.865 6.08 5.105 6.345 5.365 6.61C5.415 6.66 5.47 6.71 5.52 6.76C5.72 6.955 5.725 7.275 5.525 7.475Z"
                                        fill="#6B7280" />
                                    <path
                                        d="M10.9853 9.16844C10.9853 9.30844 10.9603 9.45344 10.9103 9.59344C10.8953 9.63344 10.8803 9.67344 10.8603 9.71344C10.7753 9.89344 10.6653 10.0634 10.5203 10.2234C10.2753 10.4934 10.0053 10.6884 9.70029 10.8134C9.69529 10.8134 9.69029 10.8184 9.68529 10.8184C9.39029 10.9384 9.07029 11.0034 8.72529 11.0034C8.21529 11.0034 7.67029 10.8834 7.09529 10.6384C6.52029 10.3934 5.94529 10.0634 5.37529 9.64844C5.18029 9.50344 4.98529 9.35844 4.80029 9.20344L6.43529 7.56844C6.57529 7.67344 6.70029 7.75344 6.80529 7.80844C6.83029 7.81844 6.86029 7.83344 6.89529 7.84844C6.93529 7.86344 6.97529 7.86844 7.02029 7.86844C7.10529 7.86844 7.17029 7.83844 7.22529 7.78344L7.60529 7.40844C7.73029 7.28344 7.85029 7.18844 7.96529 7.12844C8.08029 7.05844 8.19529 7.02344 8.32029 7.02344C8.41529 7.02344 8.51529 7.04344 8.62529 7.08844C8.73529 7.13344 8.85029 7.19844 8.97529 7.28344L10.6303 8.45844C10.7603 8.54844 10.8503 8.65344 10.9053 8.77844C10.9553 8.90344 10.9853 9.02844 10.9853 9.16844Z"
                                        fill="#6B7280" />
                                </g>
                            </svg>
                        </span>123456789 |
                        <svg width="12" height="12" viewBox="0 0 12 12" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <g clip-path="url(#clip0_1897_9891)">
                                <mask id="mask0_1897_9891" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0"
                                    y="0" width="12" height="12">
                                    <path d="M12 0H0V12H12V0Z" fill="white" />
                                </mask>
                                <g mask="url(#mask0_1897_9891)">
                                    <path
                                        d="M8.5 1.75H3.5C2 1.75 1 2.5 1 4.25V7.75C1 9.5 2 10.25 3.5 10.25H8.5C10 10.25 11 9.5 11 7.75V4.25C11 2.5 10 1.75 8.5 1.75ZM8.735 4.795L7.17 6.045C6.84 6.31 6.42 6.44 6 6.44C5.58 6.44 5.155 6.31 4.83 6.045L3.265 4.795C3.105 4.665 3.08 4.425 3.205 4.265C3.335 4.105 3.57 4.075 3.73 4.205L5.295 5.455C5.675 5.76 6.32 5.76 6.7 5.455L8.265 4.205C8.425 4.075 8.665 4.1 8.79 4.265C8.92 4.425 8.895 4.665 8.735 4.795Z"
                                        fill="#6B7280" />
                                </g>
                            </g>
                            <defs>
                                <clipPath id="clip0_1897_9891">
                                    <rect width="12" height="12" fill="white" />
                                </clipPath>
                            </defs>
                        </svg>
                        userx@gmail.com
                    </p>


                </div>

            </div>

            <!-- RIGHT SIDE -->
            <div class="text-end">
                <small class="status-label">Current Plan Status</small>
                <div class="status-active">Active</div>
            </div>

        </div>


        <div class="row g-2 mt-2 ">

            <!-- LEFT SECTION -->
            <div class="col-12 col-md-12 col-lg-6">

                <div class="custom-plan-card">

                    <!-- Header -->
                    <div class="custom-plan-header">
                        <h4 class="mb-0">
                            Current Plan Details
                        </h4>
                    </div>

                    <!-- Body -->
                    <div class="custom-plan-body">

                        <!-- Details -->
                        <div class="custom-plan-detail-row">
                            <span>Today's Salad</span>

                            <strong class="text-success1">
                                Avocado cucumber salad
                            </strong>
                        </div>

                        <div class="custom-plan-detail-row">
                            <span>Plan Name</span>

                            <strong>
                                Monthly Plan
                            </strong>
                        </div>

                        <div class="custom-plan-detail-row">
                            <span>Price</span>

                            <strong>
                                ₹000
                            </strong>
                        </div>

                        <div class="custom-plan-detail-row">
                            <span>Payment Mode</span>

                            <strong>
                                UPI/Card/Net Banking
                            </strong>
                        </div>

                        <div class="custom-plan-detail-row">
                            <span>Start Date</span>

                            <strong>
                                11th May, 2026
                            </strong>
                        </div>

                        <div class="custom-plan-detail-row">
                            <span>End Date</span>

                            <strong>
                                11th Jun, 2026
                            </strong>
                        </div>

                        <div class="custom-plan-detail-row">
                            <span>Delivery Window</span>

                            <strong>
                                7 am – 9 am · Mon–Fri
                            </strong>
                        </div>

                        <div class="custom-plan-detail-row align-items-start">
                            <span>Delivery Address</span>

                            <strong class="text-end">
                                14 Gandhi Nagar, 2nd cross,
                                Coimbatore
                            </strong>
                        </div>

                        <!-- Product Timeline -->
                        <div class="custom-timeline-card mt-4">

                            <div class="custom-timeline-header">
                                Products Under Current Plan
                            </div>

                            <div class="custom-timeline-body">

                                <!-- Item -->
                                <div class="custom-timeline-item">

                                    <div class="custom-day-icon">
                                        <img src="{{ asset('backend/template/svg-icon/product-image-dark.svg') }}"
                                            alt="">
                                    </div>

                                    <div class="custom-timeline-content">

                                        <div class="custom-day-title">
                                            DAY 1
                                        </div>

                                        <div class="custom-product-title">
                                            Avocado cucumber salad
                                        </div>

                                    </div>

                                    <div class="custom-line success"></div>

                                    <div class="custom-status success  ms-4 mt-3">
                                        ---------● Delivered on 8th May, 2026
                                    </div>

                                </div>

                                <!-- Item -->
                                <div class="custom-timeline-item">

                                    <div class="custom-day-icon">
                                        <img src="{{ asset('backend/template/svg-icon/product-image-dark.svg') }}"
                                            alt="">
                                    </div>

                                    <div class="custom-timeline-content">

                                        <div class="custom-day-title">
                                            DAY 2
                                        </div>

                                        <div class="custom-product-title">
                                            Avocado cucumber salad
                                        </div>

                                    </div>

                                    <div class="custom-line success"></div>

                                    <div class="custom-status success ms-4 mt-3">
                                        ---------● Delivered on 9th May, 2026
                                    </div>

                                </div>

                                <!-- Item -->
                                <div class="custom-timeline-item">

                                    <div class="custom-day-icon">
                                        <img src="{{ asset('backend/template/svg-icon/product-image-dark.svg') }}"
                                            alt="">
                                    </div>

                                    <div class="custom-timeline-content">

                                        <div class="custom-day-title">
                                            DAY 3
                                        </div>

                                        <div class="custom-product-title">
                                            Avocado cucumber salad
                                        </div>

                                    </div>

                                    <div class="custom-line success"></div>

                                    <div class="custom-status success ms-4 mt-3">
                                        ---------●Delivered on 10th May, 2026
                                    </div>

                                </div>

                                <!-- Pending -->
                                <div class="custom-timeline-item">

                                    <div class="custom-day-icon">
                                        <img src="{{ asset('backend/template/svg-icon/product-image-dark.svg') }}"
                                            alt="">
                                    </div>

                                    <div class="custom-timeline-content">

                                        <div class="custom-day-title">
                                            DAY 4
                                        </div>

                                        <div class="custom-product-title">
                                            Avocado cucumber salad
                                        </div>

                                    </div>



                                    <div class="custom-status pending">
                                        ----------------●<svg width="10" height="10" viewBox="0 0 10 10"
                                            fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M5 0C2.24 0 0 2.24 0 5C0 7.76 2.24 10 5 10C7.76 10 10 7.76 10 5C10 2.24 7.76 0 5 0ZM5.375 5C5.375 5.05 5.365 5.095 5.345 5.145C5.305 5.235 5.235 5.31 5.14 5.35C5.095 5.37 5.045 5.38 4.995 5.38C4.945 5.38 4.895 5.37 4.85 5.35C4.805 5.33 4.765 5.305 4.73 5.27L2.785 3.325C2.64 3.18 2.64 2.94 2.785 2.795C2.93 2.65 3.17 2.65 3.315 2.795L4.62 4.1V2.225C4.62 2.02 4.79 1.85 4.995 1.85C5.2 1.85 5.37 2.02 5.37 2.225V5.005L5.375 5Z"
                                                fill="#6B7280" />
                                        </svg>
                                        Pending
                                    </div>

                                </div>

                                <!-- Paused -->
                                <div class="custom-timeline-item">

                                    <div class="custom-day-icon">
                                        <img src="{{ asset('backend/template/svg-icon/product-image-dark.svg') }}"
                                            alt="">
                                    </div>

                                    <div class="custom-timeline-content">

                                        <div class="custom-day-title">
                                            DAY 5
                                        </div>

                                        <div class="custom-product-title">
                                            Avocado cucumber salad
                                        </div>

                                    </div>


                                    <div class="custom-status paused">
                                        ----------------●❚❚ Paused
                                    </div>

                                </div>

                                <!-- Paused -->
                                <div class="custom-timeline-item">

                                    <div class="custom-day-icon">
                                        <img src="{{ asset('backend/template/svg-icon/product-image-dark.svg') }}"
                                            alt="">
                                    </div>

                                    <div class="custom-timeline-content">

                                        <div class="custom-day-title">
                                            DAY 6
                                        </div>

                                        <div class="custom-product-title">
                                            Avocado cucumber salad
                                        </div>

                                    </div>



                                    <div class="custom-status paused">
                                        ----------------●❚❚ Paused
                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

            <!-- RIGHT SECTION -->
            <div class="col-12 col-md-12 col-lg-6">

                <div class="custom-plan-card">

                    <!-- Header -->
                    <div class="custom-plan-header1 d-flex justify-content-between align-items-center">

                        <h4 class="mb-0">
                            Plan History
                        </h4>
                        <div class=" d-flex justify-content-between align-items-center">

                            {{-- If the plans selected the export button should show --}}
                            {{-- <a href="{{ route('backend.template.subscription.NewPlan') }}"
                            class="button-green1 d-flex flex-row gap-2 align-items-center ">
                            <span>
                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M3.33325 13.3367V14.1667C3.33325 14.8297 3.59664 15.4656 4.06549 15.9344C4.53433 16.4033 5.17021 16.6667 5.83325 16.6667H14.1666C14.8296 16.6667 15.4655 16.4033 15.9344 15.9344C16.4032 15.4656 16.6666 14.8297 16.6666 14.1667V13.3333M9.99992 12.9167V3.75M7.08325 6.66667L9.99992 3.75L12.9166 6.66667"
                                        stroke="#0AA437" stroke-width="1.7" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                </svg>


                            </span>
                            Export
                        </a> --}}
                            <h5 class=" ms-2 custom-paid-text mt-3">

                                Total Paid:
                                <span>
                                    ₹00000
                                </span>
                            </h5>
                        </div>
                    </div>

                    <!-- Table -->
                    <div class="custom-history-body">

                        <div class="table-responsive">

                            <table class="table custom-history-table align-middle mb-0">

                                <thead>

                                    <tr>

                                        <th width="50">
                                            <input type="checkbox" class="form-check-input">
                                        </th>

                                        <th>Plan</th>
                                        <th>Plan Value</th>
                                        <th>Start Date</th>
                                        <th>End Date</th>
                                        <th>Plan Status</th>

                                    </tr>

                                </thead>

                                <tbody>

                                    <!-- Row -->
                                    <tr>

                                        <td>
                                            <input type="checkbox" class="form-check-input">
                                        </td>

                                        <td>Monthly</td>

                                        <td>₹0000</td>

                                        <td>00/00/0000</td>

                                        <td>00/00/0000</td>

                                        <td>
                                            <span class="status-active">
                                                Active
                                            </span>
                                        </td>

                                    </tr>

                                    <!-- Repeat -->
                                    <tr>

                                        <td>
                                            <input type="checkbox" class="form-check-input">
                                        </td>

                                        <td>Monthly</td>

                                        <td>₹0000</td>

                                        <td>00/00/0000</td>

                                        <td>00/00/0000</td>

                                        <td>
                                            <span class="status-expired">
                                                Expired
                                            </span>
                                        </td>

                                    </tr>
                                    <tr>

                                        <td>
                                            <input type="checkbox" class="form-check-input">
                                        </td>

                                        <td>Monthly</td>

                                        <td>₹0000</td>

                                        <td>00/00/0000</td>

                                        <td>00/00/0000</td>

                                        <td>
                                            <span class="status-expired">
                                                Expired
                                            </span>
                                        </td>

                                    </tr>

                                    <tr>

                                        <td>
                                            <input type="checkbox" class="form-check-input">
                                        </td>

                                        <td>Monthly</td>

                                        <td>₹0000</td>

                                        <td>00/00/0000</td>

                                        <td>00/00/0000</td>

                                        <td>
                                            <span class="status-expired">
                                                Expired
                                            </span>
                                        </td>

                                    </tr>

                                    <tr>

                                        <td>
                                            <input type="checkbox" class="form-check-input">
                                        </td>

                                        <td>Monthly</td>

                                        <td>₹0000</td>

                                        <td>00/00/0000</td>

                                        <td>00/00/0000</td>

                                        <td>
                                            <span class="status-expired">
                                                Expired
                                            </span>
                                        </td>

                                    </tr>

                                    <tr>

                                        <td>
                                            <input type="checkbox" class="form-check-input">
                                        </td>

                                        <td>Monthly</td>

                                        <td>₹0000</td>

                                        <td>00/00/0000</td>

                                        <td>00/00/0000</td>

                                        <td>
                                            <span class="status-expired">
                                                Expired
                                            </span>
                                        </td>

                                    </tr>

                                    <tr>

                                        <td>
                                            <input type="checkbox" class="form-check-input">
                                        </td>

                                        <td>Monthly</td>

                                        <td>₹0000</td>

                                        <td>00/00/0000</td>

                                        <td>00/00/0000</td>

                                        <td>
                                            <span class="status-expired">
                                                Expired
                                            </span>
                                        </td>

                                    </tr>


                                    <tr>

                                        <td>
                                            <input type="checkbox" class="form-check-input">
                                        </td>

                                        <td>Monthly</td>

                                        <td>₹0000</td>

                                        <td>00/00/0000</td>

                                        <td>00/00/0000</td>

                                        <td>
                                            <span class="status-expired">
                                                Expired
                                            </span>
                                        </td>

                                    </tr>

                                    <tr>

                                        <td>
                                            <input type="checkbox" class="form-check-input">
                                        </td>

                                        <td>Monthly</td>

                                        <td>₹0000</td>

                                        <td>00/00/0000</td>

                                        <td>00/00/0000</td>

                                        <td>
                                            <span class="status-expired">
                                                Expired
                                            </span>
                                        </td>

                                    </tr>

                                    <tr>

                                        <td>
                                            <input type="checkbox" class="form-check-input">
                                        </td>

                                        <td>Monthly</td>

                                        <td>₹0000</td>

                                        <td>00/00/0000</td>

                                        <td>00/00/0000</td>

                                        <td>
                                            <span class="status-expired">
                                                Expired
                                            </span>
                                        </td>

                                    </tr>

                                </tbody>

                            </table>

                        </div>

                    </div>

                </div>

            </div>

        </div>
    </section>
@endsection