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

@section('content')

    <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>Production Details - Today
                </h2>
            </a>

        </div>
    </div>

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

        <!-- Header -->
        <div class="custom-salad-header">

            <div>

                <h4 class="custom-salad-title">
                    Salad-wise preparation count
                </h4>

                <p class="custom-salad-subtitle mb-0">
                    Exact number of each salad to prepare tomorrow.
                    Paused subscribers are already excluded.
                </p>

            </div>

            <button type="button" class="btn custom-export-btn">

                <svg width="16" height="16" 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="#16A34A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />

                </svg>

                Export

            </button>

        </div>

        <!-- Table -->
        <div class="table-responsive">

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

                <thead>

                    <tr>

                        <th>Product ID</th>

                        <th>Product Name</th>

                        <th class="text-end">
                            Quantities to Prepare
                        </th>

                    </tr>

                </thead>

                <tbody>

                    <tr>

                        <td>PID001</td>

                        <td>Avocado cucumber salad</td>

                        <td class="text-end">
                            120
                        </td>

                    </tr>

                    <tr>

                        <td>PID001</td>

                        <td>Greek salad</td>

                        <td class="text-end">
                            120
                        </td>

                    </tr>

                    <tr>

                        <td>PID001</td>

                        <td>Caesar salad</td>

                        <td class="text-end">
                            120
                        </td>

                    </tr>

                    <tr>

                        <td>PID001</td>

                        <td>Quinoa power bowl</td>

                        <td class="text-end">
                            120
                        </td>

                    </tr>

                </tbody>

                <!-- Footer -->
                <tfoot>

                    <tr>

                        <td colspan="2" class="custom-total-label">

                            Total Salads to Prepare

                        </td>

                        <td class="text-end custom-total-count">

                            480

                        </td>

                    </tr>

                </tfoot>

            </table>

        </div>

    </div>
    <div class="custom-salad-card mt-3">

        <!-- Header -->
        <div class="custom-salad-header">

            <div>

                <h4 class="custom-salad-title">
                    Paused subscribers today </h4>

                <p class="custom-salad-subtitle mb-0">
                    These 18 subscribers are paused. No salad is prepared for them tomorrow.
                </p>

            </div>

            <button type="button" class="btn custom-export-btn">

                <svg width="16" height="16" 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="#16A34A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />

                </svg>

                Export

            </button>

        </div>

        <div class="table-wrapper">
            <!-- Table -->
            <div class="table-responsive ">

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

                    <thead>

                        <tr>

                            <th>Subscriber ID</th>

                            <th>Subscriber Details</th>

                            <th>Plan Name</th>

                            <th>Paused On</th>

                            <th>Paused Till</th>

                            <th>Salad's they'd get</th>



                        </tr>

                    </thead>


                    <tbody class="list">

                        <tr>

                            <td>SID001</td>
                            <td class="table-body-content p-3">
                                <div class="sr-customer">
                                    <span class="sr-name">Subscriber X</span>
                                    <span class="sr-phone"><svg width="14" height="14" viewBox="0 0 14 14"
                                            fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <g clip-path="url(#clip0_855_2251)">
                                                <mask id="mask0_855_2251" style="mask-type:luminance"
                                                    maskUnits="userSpaceOnUse" x="0" y="0" width="14" height="14">
                                                    <path d="M14 0H0V14H14V0Z" fill="white" />
                                                </mask>
                                                <g mask="url(#mask0_855_2251)">
                                                    <path
                                                        d="M6.44592 8.72214L5.36675 9.8013C5.13925 10.0288 4.77758 10.0288 4.54425 9.80713C4.48008 9.74297 4.41592 9.68464 4.35175 9.62047C3.75091 9.0138 3.20841 8.37797 2.72425 7.71297C2.24591 7.04797 1.86091 6.38297 1.58091 5.7238C1.30675 5.0588 1.16675 4.42297 1.16675 3.8163C1.16675 3.41964 1.23675 3.04047 1.37675 2.69047C1.51675 2.33464 1.73841 2.00797 2.04758 1.7163C2.42091 1.3488 2.82925 1.16797 3.26092 1.16797C3.42425 1.16797 3.58758 1.20297 3.73341 1.27297C3.88508 1.34297 4.01925 1.44797 4.12425 1.59964L5.47758 3.50714C5.58258 3.65297 5.65841 3.78714 5.71092 3.91547C5.76341 4.03797 5.79258 4.16047 5.79258 4.2713C5.79258 4.4113 5.75175 4.5513 5.67008 4.68547C5.59425 4.81964 5.48342 4.95964 5.34341 5.09964L4.90008 5.56047C4.83591 5.62464 4.80675 5.70047 4.80675 5.7938C4.80675 5.84047 4.81258 5.8813 4.82425 5.92797C4.84175 5.97464 4.85925 6.00963 4.87092 6.04463C4.97592 6.23713 5.15675 6.48797 5.41341 6.7913C5.67591 7.09464 5.95591 7.4038 6.25925 7.71297C6.31758 7.7713 6.38175 7.82964 6.44008 7.88797C6.67342 8.11547 6.67925 8.4888 6.44592 8.72214Z"
                                                        fill="#6B7280" />
                                                    <path
                                                        d="M12.8159 10.6939C12.8159 10.8572 12.7868 11.0264 12.7284 11.1897C12.7109 11.2364 12.6934 11.2831 12.6701 11.3297C12.5709 11.5397 12.4426 11.7381 12.2734 11.9247C11.9876 12.2397 11.6726 12.4672 11.3168 12.6131C11.3109 12.6131 11.3051 12.6189 11.2993 12.6189C10.9551 12.7589 10.5818 12.8347 10.1793 12.8347C9.58426 12.8347 8.94843 12.6947 8.2776 12.4089C7.60676 12.1231 6.93593 11.7381 6.27093 11.2539C6.04343 11.0847 5.81593 10.9156 5.6001 10.7347L7.5076 8.82724C7.67093 8.94974 7.81676 9.04307 7.93926 9.10724C7.96843 9.11891 8.00343 9.13641 8.04426 9.15391C8.09093 9.17141 8.1376 9.17724 8.1901 9.17724C8.28926 9.17724 8.3651 9.14224 8.42926 9.07807L8.8726 8.64057C9.01843 8.49474 9.15843 8.38391 9.2926 8.31391C9.42676 8.23224 9.56093 8.19141 9.70676 8.19141C9.8176 8.19141 9.93426 8.21474 10.0626 8.26724C10.1909 8.31974 10.3251 8.39557 10.4709 8.49474L12.4018 9.86557C12.5534 9.97057 12.6584 10.0931 12.7226 10.2389C12.7809 10.3847 12.8159 10.5306 12.8159 10.6939Z"
                                                        fill="#6B7280" />
                                                </g>
                                            </g>
                                            <defs>
                                                <clipPath id="clip0_855_2251">
                                                    <rect width="14" height="14" fill="white" />
                                                </clipPath>
                                            </defs>
                                        </svg>
                                        123456789</span>
                                </div>
                            </td>

                            <td>
                                Monthly Plan
                            </td>
                            <td>11th May, 2026</td>
                            <td>13th May, 2026</td>
                            <td>Quinoa power bowl</td>

                        </tr>

                        <tr>

                            <td>SID001</td>
                            <td class="table-body-content p-3">
                                <div class="sr-customer">
                                    <span class="sr-name">Subscriber X</span>
                                    <span class="sr-phone"><svg width="14" height="14" viewBox="0 0 14 14"
                                            fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <g clip-path="url(#clip0_855_2251)">
                                                <mask id="mask0_855_2251" style="mask-type:luminance"
                                                    maskUnits="userSpaceOnUse" x="0" y="0" width="14" height="14">
                                                    <path d="M14 0H0V14H14V0Z" fill="white" />
                                                </mask>
                                                <g mask="url(#mask0_855_2251)">
                                                    <path
                                                        d="M6.44592 8.72214L5.36675 9.8013C5.13925 10.0288 4.77758 10.0288 4.54425 9.80713C4.48008 9.74297 4.41592 9.68464 4.35175 9.62047C3.75091 9.0138 3.20841 8.37797 2.72425 7.71297C2.24591 7.04797 1.86091 6.38297 1.58091 5.7238C1.30675 5.0588 1.16675 4.42297 1.16675 3.8163C1.16675 3.41964 1.23675 3.04047 1.37675 2.69047C1.51675 2.33464 1.73841 2.00797 2.04758 1.7163C2.42091 1.3488 2.82925 1.16797 3.26092 1.16797C3.42425 1.16797 3.58758 1.20297 3.73341 1.27297C3.88508 1.34297 4.01925 1.44797 4.12425 1.59964L5.47758 3.50714C5.58258 3.65297 5.65841 3.78714 5.71092 3.91547C5.76341 4.03797 5.79258 4.16047 5.79258 4.2713C5.79258 4.4113 5.75175 4.5513 5.67008 4.68547C5.59425 4.81964 5.48342 4.95964 5.34341 5.09964L4.90008 5.56047C4.83591 5.62464 4.80675 5.70047 4.80675 5.7938C4.80675 5.84047 4.81258 5.8813 4.82425 5.92797C4.84175 5.97464 4.85925 6.00963 4.87092 6.04463C4.97592 6.23713 5.15675 6.48797 5.41341 6.7913C5.67591 7.09464 5.95591 7.4038 6.25925 7.71297C6.31758 7.7713 6.38175 7.82964 6.44008 7.88797C6.67342 8.11547 6.67925 8.4888 6.44592 8.72214Z"
                                                        fill="#6B7280" />
                                                    <path
                                                        d="M12.8159 10.6939C12.8159 10.8572 12.7868 11.0264 12.7284 11.1897C12.7109 11.2364 12.6934 11.2831 12.6701 11.3297C12.5709 11.5397 12.4426 11.7381 12.2734 11.9247C11.9876 12.2397 11.6726 12.4672 11.3168 12.6131C11.3109 12.6131 11.3051 12.6189 11.2993 12.6189C10.9551 12.7589 10.5818 12.8347 10.1793 12.8347C9.58426 12.8347 8.94843 12.6947 8.2776 12.4089C7.60676 12.1231 6.93593 11.7381 6.27093 11.2539C6.04343 11.0847 5.81593 10.9156 5.6001 10.7347L7.5076 8.82724C7.67093 8.94974 7.81676 9.04307 7.93926 9.10724C7.96843 9.11891 8.00343 9.13641 8.04426 9.15391C8.09093 9.17141 8.1376 9.17724 8.1901 9.17724C8.28926 9.17724 8.3651 9.14224 8.42926 9.07807L8.8726 8.64057C9.01843 8.49474 9.15843 8.38391 9.2926 8.31391C9.42676 8.23224 9.56093 8.19141 9.70676 8.19141C9.8176 8.19141 9.93426 8.21474 10.0626 8.26724C10.1909 8.31974 10.3251 8.39557 10.4709 8.49474L12.4018 9.86557C12.5534 9.97057 12.6584 10.0931 12.7226 10.2389C12.7809 10.3847 12.8159 10.5306 12.8159 10.6939Z"
                                                        fill="#6B7280" />
                                                </g>
                                            </g>
                                            <defs>
                                                <clipPath id="clip0_855_2251">
                                                    <rect width="14" height="14" fill="white" />
                                                </clipPath>
                                            </defs>
                                        </svg>
                                        123456789</span>
                                </div>
                            </td>

                            <td>
                                Monthly Plan
                            </td>
                            <td>11th May, 2026</td>
                            <td>13th May, 2026</td>
                            <td>Quinoa power bowl</td>

                        </tr>

                        <tr>

                            <td>SID001</td>
                            <td class="table-body-content p-3">
                                <div class="sr-customer">
                                    <span class="sr-name">Subscriber X</span>
                                    <span class="sr-phone"><svg width="14" height="14" viewBox="0 0 14 14"
                                            fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <g clip-path="url(#clip0_855_2251)">
                                                <mask id="mask0_855_2251" style="mask-type:luminance"
                                                    maskUnits="userSpaceOnUse" x="0" y="0" width="14" height="14">
                                                    <path d="M14 0H0V14H14V0Z" fill="white" />
                                                </mask>
                                                <g mask="url(#mask0_855_2251)">
                                                    <path
                                                        d="M6.44592 8.72214L5.36675 9.8013C5.13925 10.0288 4.77758 10.0288 4.54425 9.80713C4.48008 9.74297 4.41592 9.68464 4.35175 9.62047C3.75091 9.0138 3.20841 8.37797 2.72425 7.71297C2.24591 7.04797 1.86091 6.38297 1.58091 5.7238C1.30675 5.0588 1.16675 4.42297 1.16675 3.8163C1.16675 3.41964 1.23675 3.04047 1.37675 2.69047C1.51675 2.33464 1.73841 2.00797 2.04758 1.7163C2.42091 1.3488 2.82925 1.16797 3.26092 1.16797C3.42425 1.16797 3.58758 1.20297 3.73341 1.27297C3.88508 1.34297 4.01925 1.44797 4.12425 1.59964L5.47758 3.50714C5.58258 3.65297 5.65841 3.78714 5.71092 3.91547C5.76341 4.03797 5.79258 4.16047 5.79258 4.2713C5.79258 4.4113 5.75175 4.5513 5.67008 4.68547C5.59425 4.81964 5.48342 4.95964 5.34341 5.09964L4.90008 5.56047C4.83591 5.62464 4.80675 5.70047 4.80675 5.7938C4.80675 5.84047 4.81258 5.8813 4.82425 5.92797C4.84175 5.97464 4.85925 6.00963 4.87092 6.04463C4.97592 6.23713 5.15675 6.48797 5.41341 6.7913C5.67591 7.09464 5.95591 7.4038 6.25925 7.71297C6.31758 7.7713 6.38175 7.82964 6.44008 7.88797C6.67342 8.11547 6.67925 8.4888 6.44592 8.72214Z"
                                                        fill="#6B7280" />
                                                    <path
                                                        d="M12.8159 10.6939C12.8159 10.8572 12.7868 11.0264 12.7284 11.1897C12.7109 11.2364 12.6934 11.2831 12.6701 11.3297C12.5709 11.5397 12.4426 11.7381 12.2734 11.9247C11.9876 12.2397 11.6726 12.4672 11.3168 12.6131C11.3109 12.6131 11.3051 12.6189 11.2993 12.6189C10.9551 12.7589 10.5818 12.8347 10.1793 12.8347C9.58426 12.8347 8.94843 12.6947 8.2776 12.4089C7.60676 12.1231 6.93593 11.7381 6.27093 11.2539C6.04343 11.0847 5.81593 10.9156 5.6001 10.7347L7.5076 8.82724C7.67093 8.94974 7.81676 9.04307 7.93926 9.10724C7.96843 9.11891 8.00343 9.13641 8.04426 9.15391C8.09093 9.17141 8.1376 9.17724 8.1901 9.17724C8.28926 9.17724 8.3651 9.14224 8.42926 9.07807L8.8726 8.64057C9.01843 8.49474 9.15843 8.38391 9.2926 8.31391C9.42676 8.23224 9.56093 8.19141 9.70676 8.19141C9.8176 8.19141 9.93426 8.21474 10.0626 8.26724C10.1909 8.31974 10.3251 8.39557 10.4709 8.49474L12.4018 9.86557C12.5534 9.97057 12.6584 10.0931 12.7226 10.2389C12.7809 10.3847 12.8159 10.5306 12.8159 10.6939Z"
                                                        fill="#6B7280" />
                                                </g>
                                            </g>
                                            <defs>
                                                <clipPath id="clip0_855_2251">
                                                    <rect width="14" height="14" fill="white" />
                                                </clipPath>
                                            </defs>
                                        </svg>
                                        123456789</span>
                                </div>
                            </td>

                            <td>
                                Monthly Plan
                            </td>
                            <td>11th May, 2026</td>
                            <td>13th May, 2026</td>
                            <td>Quinoa power bowl</td>

                        </tr>


                        <tr>

                            <td>SID001</td>
                            <td class="table-body-content p-3">
                                <div class="sr-customer">
                                    <span class="sr-name">Subscriber X</span>
                                    <span class="sr-phone"><svg width="14" height="14" viewBox="0 0 14 14"
                                            fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <g clip-path="url(#clip0_855_2251)">
                                                <mask id="mask0_855_2251" style="mask-type:luminance"
                                                    maskUnits="userSpaceOnUse" x="0" y="0" width="14" height="14">
                                                    <path d="M14 0H0V14H14V0Z" fill="white" />
                                                </mask>
                                                <g mask="url(#mask0_855_2251)">
                                                    <path
                                                        d="M6.44592 8.72214L5.36675 9.8013C5.13925 10.0288 4.77758 10.0288 4.54425 9.80713C4.48008 9.74297 4.41592 9.68464 4.35175 9.62047C3.75091 9.0138 3.20841 8.37797 2.72425 7.71297C2.24591 7.04797 1.86091 6.38297 1.58091 5.7238C1.30675 5.0588 1.16675 4.42297 1.16675 3.8163C1.16675 3.41964 1.23675 3.04047 1.37675 2.69047C1.51675 2.33464 1.73841 2.00797 2.04758 1.7163C2.42091 1.3488 2.82925 1.16797 3.26092 1.16797C3.42425 1.16797 3.58758 1.20297 3.73341 1.27297C3.88508 1.34297 4.01925 1.44797 4.12425 1.59964L5.47758 3.50714C5.58258 3.65297 5.65841 3.78714 5.71092 3.91547C5.76341 4.03797 5.79258 4.16047 5.79258 4.2713C5.79258 4.4113 5.75175 4.5513 5.67008 4.68547C5.59425 4.81964 5.48342 4.95964 5.34341 5.09964L4.90008 5.56047C4.83591 5.62464 4.80675 5.70047 4.80675 5.7938C4.80675 5.84047 4.81258 5.8813 4.82425 5.92797C4.84175 5.97464 4.85925 6.00963 4.87092 6.04463C4.97592 6.23713 5.15675 6.48797 5.41341 6.7913C5.67591 7.09464 5.95591 7.4038 6.25925 7.71297C6.31758 7.7713 6.38175 7.82964 6.44008 7.88797C6.67342 8.11547 6.67925 8.4888 6.44592 8.72214Z"
                                                        fill="#6B7280" />
                                                    <path
                                                        d="M12.8159 10.6939C12.8159 10.8572 12.7868 11.0264 12.7284 11.1897C12.7109 11.2364 12.6934 11.2831 12.6701 11.3297C12.5709 11.5397 12.4426 11.7381 12.2734 11.9247C11.9876 12.2397 11.6726 12.4672 11.3168 12.6131C11.3109 12.6131 11.3051 12.6189 11.2993 12.6189C10.9551 12.7589 10.5818 12.8347 10.1793 12.8347C9.58426 12.8347 8.94843 12.6947 8.2776 12.4089C7.60676 12.1231 6.93593 11.7381 6.27093 11.2539C6.04343 11.0847 5.81593 10.9156 5.6001 10.7347L7.5076 8.82724C7.67093 8.94974 7.81676 9.04307 7.93926 9.10724C7.96843 9.11891 8.00343 9.13641 8.04426 9.15391C8.09093 9.17141 8.1376 9.17724 8.1901 9.17724C8.28926 9.17724 8.3651 9.14224 8.42926 9.07807L8.8726 8.64057C9.01843 8.49474 9.15843 8.38391 9.2926 8.31391C9.42676 8.23224 9.56093 8.19141 9.70676 8.19141C9.8176 8.19141 9.93426 8.21474 10.0626 8.26724C10.1909 8.31974 10.3251 8.39557 10.4709 8.49474L12.4018 9.86557C12.5534 9.97057 12.6584 10.0931 12.7226 10.2389C12.7809 10.3847 12.8159 10.5306 12.8159 10.6939Z"
                                                        fill="#6B7280" />
                                                </g>
                                            </g>
                                            <defs>
                                                <clipPath id="clip0_855_2251">
                                                    <rect width="14" height="14" fill="white" />
                                                </clipPath>
                                            </defs>
                                        </svg>
                                        123456789</span>
                                </div>
                            </td>

                            <td>
                                Monthly Plan
                            </td>
                            <td>11th May, 2026</td>
                            <td>13th May, 2026</td>
                            <td>Quinoa power bowl</td>

                        </tr>

                        <tr>

                            <td>SID001</td>
                            <td class="table-body-content p-3">
                                <div class="sr-customer">
                                    <span class="sr-name">Subscriber X</span>
                                    <span class="sr-phone"><svg width="14" height="14" viewBox="0 0 14 14"
                                            fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <g clip-path="url(#clip0_855_2251)">
                                                <mask id="mask0_855_2251" style="mask-type:luminance"
                                                    maskUnits="userSpaceOnUse" x="0" y="0" width="14" height="14">
                                                    <path d="M14 0H0V14H14V0Z" fill="white" />
                                                </mask>
                                                <g mask="url(#mask0_855_2251)">
                                                    <path
                                                        d="M6.44592 8.72214L5.36675 9.8013C5.13925 10.0288 4.77758 10.0288 4.54425 9.80713C4.48008 9.74297 4.41592 9.68464 4.35175 9.62047C3.75091 9.0138 3.20841 8.37797 2.72425 7.71297C2.24591 7.04797 1.86091 6.38297 1.58091 5.7238C1.30675 5.0588 1.16675 4.42297 1.16675 3.8163C1.16675 3.41964 1.23675 3.04047 1.37675 2.69047C1.51675 2.33464 1.73841 2.00797 2.04758 1.7163C2.42091 1.3488 2.82925 1.16797 3.26092 1.16797C3.42425 1.16797 3.58758 1.20297 3.73341 1.27297C3.88508 1.34297 4.01925 1.44797 4.12425 1.59964L5.47758 3.50714C5.58258 3.65297 5.65841 3.78714 5.71092 3.91547C5.76341 4.03797 5.79258 4.16047 5.79258 4.2713C5.79258 4.4113 5.75175 4.5513 5.67008 4.68547C5.59425 4.81964 5.48342 4.95964 5.34341 5.09964L4.90008 5.56047C4.83591 5.62464 4.80675 5.70047 4.80675 5.7938C4.80675 5.84047 4.81258 5.8813 4.82425 5.92797C4.84175 5.97464 4.85925 6.00963 4.87092 6.04463C4.97592 6.23713 5.15675 6.48797 5.41341 6.7913C5.67591 7.09464 5.95591 7.4038 6.25925 7.71297C6.31758 7.7713 6.38175 7.82964 6.44008 7.88797C6.67342 8.11547 6.67925 8.4888 6.44592 8.72214Z"
                                                        fill="#6B7280" />
                                                    <path
                                                        d="M12.8159 10.6939C12.8159 10.8572 12.7868 11.0264 12.7284 11.1897C12.7109 11.2364 12.6934 11.2831 12.6701 11.3297C12.5709 11.5397 12.4426 11.7381 12.2734 11.9247C11.9876 12.2397 11.6726 12.4672 11.3168 12.6131C11.3109 12.6131 11.3051 12.6189 11.2993 12.6189C10.9551 12.7589 10.5818 12.8347 10.1793 12.8347C9.58426 12.8347 8.94843 12.6947 8.2776 12.4089C7.60676 12.1231 6.93593 11.7381 6.27093 11.2539C6.04343 11.0847 5.81593 10.9156 5.6001 10.7347L7.5076 8.82724C7.67093 8.94974 7.81676 9.04307 7.93926 9.10724C7.96843 9.11891 8.00343 9.13641 8.04426 9.15391C8.09093 9.17141 8.1376 9.17724 8.1901 9.17724C8.28926 9.17724 8.3651 9.14224 8.42926 9.07807L8.8726 8.64057C9.01843 8.49474 9.15843 8.38391 9.2926 8.31391C9.42676 8.23224 9.56093 8.19141 9.70676 8.19141C9.8176 8.19141 9.93426 8.21474 10.0626 8.26724C10.1909 8.31974 10.3251 8.39557 10.4709 8.49474L12.4018 9.86557C12.5534 9.97057 12.6584 10.0931 12.7226 10.2389C12.7809 10.3847 12.8159 10.5306 12.8159 10.6939Z"
                                                        fill="#6B7280" />
                                                </g>
                                            </g>
                                            <defs>
                                                <clipPath id="clip0_855_2251">
                                                    <rect width="14" height="14" fill="white" />
                                                </clipPath>
                                            </defs>
                                        </svg>
                                        123456789</span>
                                </div>
                            </td>

                            <td>
                                Monthly Plan
                            </td>
                            <td>11th May, 2026</td>
                            <td>13th May, 2026</td>
                            <td>Quinoa power bowl</td>

                        </tr>

                        <tr>

                            <td>SID001</td>
                            <td class="table-body-content p-3">
                                <div class="sr-customer">
                                    <span class="sr-name">Subscriber X</span>
                                    <span class="sr-phone"><svg width="14" height="14" viewBox="0 0 14 14"
                                            fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <g clip-path="url(#clip0_855_2251)">
                                                <mask id="mask0_855_2251" style="mask-type:luminance"
                                                    maskUnits="userSpaceOnUse" x="0" y="0" width="14" height="14">
                                                    <path d="M14 0H0V14H14V0Z" fill="white" />
                                                </mask>
                                                <g mask="url(#mask0_855_2251)">
                                                    <path
                                                        d="M6.44592 8.72214L5.36675 9.8013C5.13925 10.0288 4.77758 10.0288 4.54425 9.80713C4.48008 9.74297 4.41592 9.68464 4.35175 9.62047C3.75091 9.0138 3.20841 8.37797 2.72425 7.71297C2.24591 7.04797 1.86091 6.38297 1.58091 5.7238C1.30675 5.0588 1.16675 4.42297 1.16675 3.8163C1.16675 3.41964 1.23675 3.04047 1.37675 2.69047C1.51675 2.33464 1.73841 2.00797 2.04758 1.7163C2.42091 1.3488 2.82925 1.16797 3.26092 1.16797C3.42425 1.16797 3.58758 1.20297 3.73341 1.27297C3.88508 1.34297 4.01925 1.44797 4.12425 1.59964L5.47758 3.50714C5.58258 3.65297 5.65841 3.78714 5.71092 3.91547C5.76341 4.03797 5.79258 4.16047 5.79258 4.2713C5.79258 4.4113 5.75175 4.5513 5.67008 4.68547C5.59425 4.81964 5.48342 4.95964 5.34341 5.09964L4.90008 5.56047C4.83591 5.62464 4.80675 5.70047 4.80675 5.7938C4.80675 5.84047 4.81258 5.8813 4.82425 5.92797C4.84175 5.97464 4.85925 6.00963 4.87092 6.04463C4.97592 6.23713 5.15675 6.48797 5.41341 6.7913C5.67591 7.09464 5.95591 7.4038 6.25925 7.71297C6.31758 7.7713 6.38175 7.82964 6.44008 7.88797C6.67342 8.11547 6.67925 8.4888 6.44592 8.72214Z"
                                                        fill="#6B7280" />
                                                    <path
                                                        d="M12.8159 10.6939C12.8159 10.8572 12.7868 11.0264 12.7284 11.1897C12.7109 11.2364 12.6934 11.2831 12.6701 11.3297C12.5709 11.5397 12.4426 11.7381 12.2734 11.9247C11.9876 12.2397 11.6726 12.4672 11.3168 12.6131C11.3109 12.6131 11.3051 12.6189 11.2993 12.6189C10.9551 12.7589 10.5818 12.8347 10.1793 12.8347C9.58426 12.8347 8.94843 12.6947 8.2776 12.4089C7.60676 12.1231 6.93593 11.7381 6.27093 11.2539C6.04343 11.0847 5.81593 10.9156 5.6001 10.7347L7.5076 8.82724C7.67093 8.94974 7.81676 9.04307 7.93926 9.10724C7.96843 9.11891 8.00343 9.13641 8.04426 9.15391C8.09093 9.17141 8.1376 9.17724 8.1901 9.17724C8.28926 9.17724 8.3651 9.14224 8.42926 9.07807L8.8726 8.64057C9.01843 8.49474 9.15843 8.38391 9.2926 8.31391C9.42676 8.23224 9.56093 8.19141 9.70676 8.19141C9.8176 8.19141 9.93426 8.21474 10.0626 8.26724C10.1909 8.31974 10.3251 8.39557 10.4709 8.49474L12.4018 9.86557C12.5534 9.97057 12.6584 10.0931 12.7226 10.2389C12.7809 10.3847 12.8159 10.5306 12.8159 10.6939Z"
                                                        fill="#6B7280" />
                                                </g>
                                            </g>
                                            <defs>
                                                <clipPath id="clip0_855_2251">
                                                    <rect width="14" height="14" fill="white" />
                                                </clipPath>
                                            </defs>
                                        </svg>
                                        123456789</span>
                                </div>
                            </td>

                            <td>
                                Monthly Plan
                            </td>
                            <td>11th May, 2026</td>
                            <td>13th May, 2026</td>
                            <td>Quinoa power bowl</td>

                        </tr>

                        <tr>

                            <td>SID001</td>
                            <td class="table-body-content p-3">
                                <div class="sr-customer">
                                    <span class="sr-name">Subscriber X</span>
                                    <span class="sr-phone"><svg width="14" height="14" viewBox="0 0 14 14"
                                            fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <g clip-path="url(#clip0_855_2251)">
                                                <mask id="mask0_855_2251" style="mask-type:luminance"
                                                    maskUnits="userSpaceOnUse" x="0" y="0" width="14" height="14">
                                                    <path d="M14 0H0V14H14V0Z" fill="white" />
                                                </mask>
                                                <g mask="url(#mask0_855_2251)">
                                                    <path
                                                        d="M6.44592 8.72214L5.36675 9.8013C5.13925 10.0288 4.77758 10.0288 4.54425 9.80713C4.48008 9.74297 4.41592 9.68464 4.35175 9.62047C3.75091 9.0138 3.20841 8.37797 2.72425 7.71297C2.24591 7.04797 1.86091 6.38297 1.58091 5.7238C1.30675 5.0588 1.16675 4.42297 1.16675 3.8163C1.16675 3.41964 1.23675 3.04047 1.37675 2.69047C1.51675 2.33464 1.73841 2.00797 2.04758 1.7163C2.42091 1.3488 2.82925 1.16797 3.26092 1.16797C3.42425 1.16797 3.58758 1.20297 3.73341 1.27297C3.88508 1.34297 4.01925 1.44797 4.12425 1.59964L5.47758 3.50714C5.58258 3.65297 5.65841 3.78714 5.71092 3.91547C5.76341 4.03797 5.79258 4.16047 5.79258 4.2713C5.79258 4.4113 5.75175 4.5513 5.67008 4.68547C5.59425 4.81964 5.48342 4.95964 5.34341 5.09964L4.90008 5.56047C4.83591 5.62464 4.80675 5.70047 4.80675 5.7938C4.80675 5.84047 4.81258 5.8813 4.82425 5.92797C4.84175 5.97464 4.85925 6.00963 4.87092 6.04463C4.97592 6.23713 5.15675 6.48797 5.41341 6.7913C5.67591 7.09464 5.95591 7.4038 6.25925 7.71297C6.31758 7.7713 6.38175 7.82964 6.44008 7.88797C6.67342 8.11547 6.67925 8.4888 6.44592 8.72214Z"
                                                        fill="#6B7280" />
                                                    <path
                                                        d="M12.8159 10.6939C12.8159 10.8572 12.7868 11.0264 12.7284 11.1897C12.7109 11.2364 12.6934 11.2831 12.6701 11.3297C12.5709 11.5397 12.4426 11.7381 12.2734 11.9247C11.9876 12.2397 11.6726 12.4672 11.3168 12.6131C11.3109 12.6131 11.3051 12.6189 11.2993 12.6189C10.9551 12.7589 10.5818 12.8347 10.1793 12.8347C9.58426 12.8347 8.94843 12.6947 8.2776 12.4089C7.60676 12.1231 6.93593 11.7381 6.27093 11.2539C6.04343 11.0847 5.81593 10.9156 5.6001 10.7347L7.5076 8.82724C7.67093 8.94974 7.81676 9.04307 7.93926 9.10724C7.96843 9.11891 8.00343 9.13641 8.04426 9.15391C8.09093 9.17141 8.1376 9.17724 8.1901 9.17724C8.28926 9.17724 8.3651 9.14224 8.42926 9.07807L8.8726 8.64057C9.01843 8.49474 9.15843 8.38391 9.2926 8.31391C9.42676 8.23224 9.56093 8.19141 9.70676 8.19141C9.8176 8.19141 9.93426 8.21474 10.0626 8.26724C10.1909 8.31974 10.3251 8.39557 10.4709 8.49474L12.4018 9.86557C12.5534 9.97057 12.6584 10.0931 12.7226 10.2389C12.7809 10.3847 12.8159 10.5306 12.8159 10.6939Z"
                                                        fill="#6B7280" />
                                                </g>
                                            </g>
                                            <defs>
                                                <clipPath id="clip0_855_2251">
                                                    <rect width="14" height="14" fill="white" />
                                                </clipPath>
                                            </defs>
                                        </svg>
                                        123456789</span>
                                </div>
                            </td>

                            <td>
                                Monthly Plan
                            </td>
                            <td>11th May, 2026</td>
                            <td>13th May, 2026</td>
                            <td>Quinoa power bowl</td>

                        </tr>


                    </tbody>



                </table>
                {{-- view all --}}
                <div class="p-3 text-center accordion-footer-view viewAllBtn">
                    <p class="mb-0">
                        <span class="moreCount fw-bold"></span>more sections <span class="fw-bold">View All <svg
                                width="10" height="6" class="ms-2" viewBox="0 0 10 6" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd"
                                    d="M4.8175 5.70125L9.635 0.885L8.75125 0L4.8175 3.93375L0.885 0L0 0.885L4.8175 5.70125Z"
                                    fill="#F07C00" />
                            </svg>
                        </span>
                    </p>
                </div>
                {{-- view all end --}}
            </div>
        </div>

    </div>
    <div class="custom-salad-card mt-3">

        <!-- Header -->
        <div class="custom-salad-header">

            <div>

                <h4 class="custom-salad-title">
                    Delivery zone breakdown </h4>

                <p class="custom-salad-subtitle mb-0">
                    Zone-wise delivery breakdown
                </p>

            </div>

            <button type="button" class="btn custom-export-btn">

                <svg width="16" height="16" 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="#16A34A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />

                </svg>

                Export

            </button>

        </div>

        <!-- Table -->
        <div class="table-responsive">

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

                <thead>

                    <tr>

                        <th>Zone ID</th>

                        <th>Zone Name</th>

                        <th class="text-end">
                            Total Orders
                        </th>

                    </tr>

                </thead>

                <tbody>

                    <tr>

                        <td>ZID001</td>

                        <td>Coimbatore North - Gandhipuram</td>

                        <td class="text-end">
                            34
                        </td>

                    </tr>

                    <tr>

                        <td>ZID002</td>

                        <td>Coimbatore North - Gandhipuram</td>

                        <td class="text-end">
                            34
                        </td>

                    </tr>


                </tbody>


            </table>

        </div>

    </div>

@endsection
@section('scripts')

    <script>
        $(document).ready(function() {

            let rows = $('.list tr');

            let btn = $('.viewAllBtn');

            let defaultRows = 3;

            if (rows.length > defaultRows) {

                rows.slice(defaultRows).hide();

                $('.moreCount').text(rows.length - defaultRows);

            } else {

                btn.hide();

            }

            btn.click(function() {

                if ($(this).hasClass('expanded')) {

                    rows.slice(defaultRows).hide();

                    $(this).removeClass('expanded');

                    $(this).find('p').html(
                        '<span class="moreCount fw-bold">' +
                        (rows.length - defaultRows) +
                        '</span> more sections <span class="fw-bold">View All</span>'
                    );

                } else {

                    rows.show();

                    $(this).addClass('expanded');

                    $(this).find('p').html(
                        '<span class="fw-bold">Show Less</span>'
                    );

                }

            });

        });
    </script>

@endsection