@extends('layouts.admin-master')
@section('title', 'Home')
@section('style')
    @include('admin.style')
@endsection
@section('content')
    <!-- ======== Preloader =========== -->
    <!-- <div id="preloader">
                                                                                                                                                                    <div class="spinner"></div>
                                                                                                                                                                </div> -->
    <!-- ======== Preloader =========== -->

    <!-- ======== sidebar-nav start =========== -->
    <aside class="sidebar-nav-wrapper">
        @include('admin.sidenav')
    </aside>
    <div class="overlay"></div>
    <!-- ======== sidebar-nav end =========== -->

    <!-- ======== main-wrapper start =========== -->
    <main class="main-wrapper">
        <!-- ========== header start ========== -->
        @include('admin.header')
        <!-- ========== header end ========== -->

        <!-- ========== section start ========== -->
        <section class="section">
            <div class="container-fluid">
                <!-- ========== title-wrapper start ========== -->
                <div class="title-wrapper pt-30">
                    <div class="row align-items-center">
                        <div class="col-md-6">
                            <div class="title">
                                <h2>FARM TO APMC</h2>
                            </div>
                         
                        </div>
                        <!-- end col -->
                        <div class="col-md-6">
                        </div>
                        <!-- end col -->
                    </div>
                    <!-- end row -->
                </div>

                <div class="row">
                    <div class="col-lg-12">
                        <div class="card-style mb-30">
                            <div class="title d-flex flex-wrap align-items-center mb-30 justify-content-between">
                                <div class="left">
                                    <h6 class="text-medium mb-10">Crop Category Management</h6>
                                </div>
                                <div class="right">
                                    <a href="{{ route('crop-categories.create') }}"
                                        class="main-btn primary-btn btn-hover btn-sm">
                                        <i class="lni lni-plus mr-5"></i> Add New Category
                                    </a>
                                </div>
                            </div>

                            <div class="table-responsive">
                                <table class="table top-selling-table">
                                    <thead>
                                        <tr>
                                            <th>
                                                <h6 class="text-sm text-medium">Sr. No.</h6>
                                            </th>
                                            <th>
                                                <h6 class="text-sm text-medium">Category Name</h6>
                                            </th>
                                            <th class="min-width">
                                                <h6 class="text-sm text-medium">Description</h6>
                                            </th>
                                            <th class="min-width">
                                                <h6 class="text-sm text-medium">Total Crops</h6>
                                            </th>
                                            <th class="min-width">
                                                <h6 class="text-sm text-medium">Last Updated</h6>
                                            </th>
                                            <th>
                                                <h6 class="text-sm text-medium text-end">
                                                    Actions <i class="lni lni-arrows-vertical"></i>
                                                </h6>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse ($categories as $index => $category)
                                            <tr>
                                                <td>{{ ($categories->firstItem() ?? 1) + $index }}</td>

                                                <td class="d-flex gap-2 align-items-center">
                                                    <p class="text-sm text-bold">{{ $category->category_name }}</p>
                                                </td>

                                                <td>
                                                    <p class="text-sm">
                                                        {{ Str::limit($category->description, 40) ?? 'N/A' }}
                                                    </p>
                                                </td>

                                                <td>
                                                    <span
                                                        class="status-btn success-btn">{{ $category->crops_count ?? 0 }}</span>
                                                </td>

                                                <td>
                                                    <p class="text-sm">{{ $category->updated_at->format('d M Y') }}</p>
                                                </td>

                                                <td>
                                                    <div class="action d-flex gap-2 justify-content-end">
                                                        <a href="{{ route('crop-categories.edit', $category->id) }}"
                                                            class="edit">
                                                            <i class="lni lni-pencil"></i>
                                                        </a>
                                                        <form action="{{ route('crop-categories.destroy', $category->id) }}"
                                                            method="POST"
                                                            onsubmit="return confirm('Are you sure you want to delete this category?')">
                                                            @csrf
                                                            @method('DELETE')
                                                            <button type="submit"
                                                                class="text-danger border-0 bg-transparent">
                                                                <i class="lni lni-trash-can"></i>
                                                            </button>
                                                        </form>
                                                    </div>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="6" class="text-center text-muted">No categories found</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>

                                <div class="pt-10 d-flex justify-content-between align-items-center">
                                    <div class="left-info">
                                        <p class="text-sm text-gray">
                                            Showing {{ $categories->firstItem() ?? 0 }} to
                                            {{ $categories->lastItem() ?? 0 }} of
                                            {{ $categories->total() }} entries
                                        </p>
                                    </div>

                                    <div class="pagination-links">
                                        {{ $categories->links('pagination::bootstrap-4') }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Row -->
            </div>
            <!-- end container -->
        </section>
        <!-- ========== section end ========== -->

        <!-- ========== footer start =========== -->
        @include('admin.footer')
        <!-- ========== footer end =========== -->
        @section('script')
            <script>
                // ======== jvectormap activation
                var markers = [{
                        name: "Egypt",
                        coords: [26.8206, 30.8025]
                    },
                    {
                        name: "Russia",
                        coords: [61.524, 105.3188]
                    },
                    {
                        name: "Canada",
                        coords: [56.1304, -106.3468]
                    },
                    {
                        name: "Greenland",
                        coords: [71.7069, -42.6043]
                    },
                    {
                        name: "Brazil",
                        coords: [-14.235, -51.9253]
                    },
                ];

                var jvm = new jsVectorMap({
                    map: "world_merc",
                    selector: "#map",
                    zoomButtons: true,

                    regionStyle: {
                        initial: {
                            fill: "#d1d5db",
                        },
                    },

                    labels: {
                        markers: {
                            render: (marker) => marker.name,
                        },
                    },

                    markersSelectable: true,
                    selectedMarkers: markers.map((marker, index) => {
                        var name = marker.name;

                        if (name === "Russia" || name === "Brazil") {
                            return index;
                        }
                    }),
                    markers: markers,
                    markerStyle: {
                        initial: {
                            fill: "#4A6CF7"
                        },
                        selected: {
                            fill: "#ff5050"
                        },
                    },
                    markerLabelStyle: {
                        initial: {
                            fontWeight: 400,
                            fontSize: 14,
                        },
                    },
                });
                // ====== calendar activation
                document.addEventListener("DOMContentLoaded", function() {
                    var calendarMiniEl = document.getElementById("calendar-mini");
                    var calendarMini = new FullCalendar.Calendar(calendarMiniEl, {
                        initialView: "dayGridMonth",
                        headerToolbar: {
                            end: "today prev,next",
                        },
                    });
                    calendarMini.render();
                });

                // =========== chart one start
                const ctx1 = document.getElementById("Chart1").getContext("2d");
                const chart1 = new Chart(ctx1, {
                    type: "line",
                    data: {
                        labels: [
                            "Jan",
                            "Fab",
                            "Mar",
                            "Apr",
                            "May",
                            "Jun",
                            "Jul",
                            "Aug",
                            "Sep",
                            "Oct",
                            "Nov",
                            "Dec",
                        ],
                        datasets: [{
                            label: "",
                            backgroundColor: "transparent",
                            borderColor: "#365CF5",
                            data: [
                                600, 800, 750, 880, 940, 880, 900, 770, 920, 890, 976, 1100,
                            ],
                            pointBackgroundColor: "transparent",
                            pointHoverBackgroundColor: "#365CF5",
                            pointBorderColor: "transparent",
                            pointHoverBorderColor: "#fff",
                            pointHoverBorderWidth: 5,
                            borderWidth: 5,
                            pointRadius: 8,
                            pointHoverRadius: 8,
                            cubicInterpolationMode: "monotone", // Add this line for curved line
                        }, ],
                    },
                    options: {
                        plugins: {
                            tooltip: {
                                callbacks: {
                                    labelColor: function(context) {
                                        return {
                                            backgroundColor: "#ffffff",
                                            color: "#171717"
                                        };
                                    },
                                },
                                intersect: false,
                                backgroundColor: "#f9f9f9",
                                title: {
                                    fontFamily: "Plus Jakarta Sans",
                                    color: "#8F92A1",
                                    fontSize: 12,
                                },
                                body: {
                                    fontFamily: "Plus Jakarta Sans",
                                    color: "#171717",
                                    fontStyle: "bold",
                                    fontSize: 16,
                                },
                                multiKeyBackground: "transparent",
                                displayColors: false,
                                padding: {
                                    x: 30,
                                    y: 10,
                                },
                                bodyAlign: "center",
                                titleAlign: "center",
                                titleColor: "#8F92A1",
                                bodyColor: "#171717",
                                bodyFont: {
                                    family: "Plus Jakarta Sans",
                                    size: "16",
                                    weight: "bold",
                                },
                            },
                            legend: {
                                display: false,
                            },
                        },
                        responsive: true,
                        maintainAspectRatio: false,
                        title: {
                            display: false,
                        },
                        scales: {
                            y: {
                                grid: {
                                    display: false,
                                    drawTicks: false,
                                    drawBorder: false,
                                },
                                ticks: {
                                    padding: 35,
                                    max: 1200,
                                    min: 500,
                                },
                            },
                            x: {
                                grid: {
                                    drawBorder: false,
                                    color: "rgba(143, 146, 161, .1)",
                                    zeroLineColor: "rgba(143, 146, 161, .1)",
                                },
                                ticks: {
                                    padding: 20,
                                },
                            },
                        },
                    },
                });
                // =========== chart one end

                // =========== chart two start
                const ctx2 = document.getElementById("Chart2").getContext("2d");
                const chart2 = new Chart(ctx2, {
                    type: "bar",
                    data: {
                        labels: [
                            "Jan",
                            "Fab",
                            "Mar",
                            "Apr",
                            "May",
                            "Jun",
                            "Jul",
                            "Aug",
                            "Sep",
                            "Oct",
                            "Nov",
                            "Dec",
                        ],
                        datasets: [{
                            label: "",
                            backgroundColor: "#365CF5",
                            borderRadius: 30,
                            barThickness: 6,
                            maxBarThickness: 8,
                            data: [
                                600, 700, 1000, 700, 650, 800, 690, 740, 720, 1120, 876, 900,
                            ],
                        }, ],
                    },
                    options: {
                        plugins: {
                            tooltip: {
                                callbacks: {
                                    titleColor: function(context) {
                                        return "#8F92A1";
                                    },
                                    label: function(context) {
                                        let label = context.dataset.label || "";

                                        if (label) {
                                            label += ": ";
                                        }
                                        label += context.parsed.y;
                                        return label;
                                    },
                                },
                                backgroundColor: "#F3F6F8",
                                titleAlign: "center",
                                bodyAlign: "center",
                                titleFont: {
                                    size: 12,
                                    weight: "bold",
                                    color: "#8F92A1",
                                },
                                bodyFont: {
                                    size: 16,
                                    weight: "bold",
                                    color: "#171717",
                                },
                                displayColors: false,
                                padding: {
                                    x: 30,
                                    y: 10,
                                },
                            },
                        },
                        legend: {
                            display: false,
                        },
                        legend: {
                            display: false,
                        },
                        layout: {
                            padding: {
                                top: 15,
                                right: 15,
                                bottom: 15,
                                left: 15,
                            },
                        },
                        responsive: true,
                        maintainAspectRatio: false,
                        scales: {
                            y: {
                                grid: {
                                    display: false,
                                    drawTicks: false,
                                    drawBorder: false,
                                },
                                ticks: {
                                    padding: 35,
                                    max: 1200,
                                    min: 0,
                                },
                            },
                            x: {
                                grid: {
                                    display: false,
                                    drawBorder: false,
                                    color: "rgba(143, 146, 161, .1)",
                                    drawTicks: false,
                                    zeroLineColor: "rgba(143, 146, 161, .1)",
                                },
                                ticks: {
                                    padding: 20,
                                },
                            },
                        },
                        plugins: {
                            legend: {
                                display: false,
                            },
                            title: {
                                display: false,
                            },
                        },
                    },
                });
                // =========== chart two end

                // =========== chart three start
                const ctx3 = document.getElementById("Chart3").getContext("2d");
                const chart3 = new Chart(ctx3, {
                    type: "line",
                    data: {
                        labels: [
                            "Jan",
                            "Feb",
                            "Mar",
                            "Apr",
                            "May",
                            "Jun",
                            "Jul",
                            "Aug",
                            "Sep",
                            "Oct",
                            "Nov",
                            "Dec",
                        ],
                        datasets: [{
                                label: "Revenue",
                                backgroundColor: "transparent",
                                borderColor: "#365CF5",
                                data: [80, 120, 110, 100, 130, 150, 115, 145, 140, 130, 160, 210],
                                pointBackgroundColor: "transparent",
                                pointHoverBackgroundColor: "#365CF5",
                                pointBorderColor: "transparent",
                                pointHoverBorderColor: "#365CF5",
                                pointHoverBorderWidth: 3,
                                pointBorderWidth: 5,
                                pointRadius: 5,
                                pointHoverRadius: 8,
                                fill: false,
                                tension: 0.4,
                            },
                            {
                                label: "Profit",
                                backgroundColor: "transparent",
                                borderColor: "#9b51e0",
                                data: [
                                    120, 160, 150, 140, 165, 210, 135, 155, 170, 140, 130, 200,
                                ],
                                pointBackgroundColor: "transparent",
                                pointHoverBackgroundColor: "#9b51e0",
                                pointBorderColor: "transparent",
                                pointHoverBorderColor: "#9b51e0",
                                pointHoverBorderWidth: 3,
                                pointBorderWidth: 5,
                                pointRadius: 5,
                                pointHoverRadius: 8,
                                fill: false,
                                tension: 0.4,
                            },
                            {
                                label: "Order",
                                backgroundColor: "transparent",
                                borderColor: "#f2994a",
                                data: [180, 110, 140, 135, 100, 90, 145, 115, 100, 110, 115, 150],
                                pointBackgroundColor: "transparent",
                                pointHoverBackgroundColor: "#f2994a",
                                pointBorderColor: "transparent",
                                pointHoverBorderColor: "#f2994a",
                                pointHoverBorderWidth: 3,
                                pointBorderWidth: 5,
                                pointRadius: 5,
                                pointHoverRadius: 8,
                                fill: false,
                                tension: 0.4,
                            },
                        ],
                    },
                    options: {
                        plugins: {
                            tooltip: {
                                intersect: false,
                                backgroundColor: "#fbfbfb",
                                titleColor: "#8F92A1",
                                bodyColor: "#272727",
                                titleFont: {
                                    size: 16,
                                    family: "Plus Jakarta Sans",
                                    weight: "400",
                                },
                                bodyFont: {
                                    family: "Plus Jakarta Sans",
                                    size: 16,
                                },
                                multiKeyBackground: "transparent",
                                displayColors: false,
                                padding: {
                                    x: 30,
                                    y: 15,
                                },
                                borderColor: "rgba(143, 146, 161, .1)",
                                borderWidth: 1,
                                enabled: true,
                            },
                            title: {
                                display: false,
                            },
                            legend: {
                                display: false,
                            },
                        },
                        layout: {
                            padding: {
                                top: 0,
                            },
                        },
                        responsive: true,
                        // maintainAspectRatio: false,
                        legend: {
                            display: false,
                        },
                        scales: {
                            y: {
                                grid: {
                                    display: false,
                                    drawTicks: false,
                                    drawBorder: false,
                                },
                                ticks: {
                                    padding: 35,
                                },
                                max: 350,
                                min: 50,
                            },
                            x: {
                                grid: {
                                    drawBorder: false,
                                    color: "rgba(143, 146, 161, .1)",
                                    drawTicks: false,
                                    zeroLineColor: "rgba(143, 146, 161, .1)",
                                },
                                ticks: {
                                    padding: 20,
                                },
                            },
                        },
                    },
                });
                // =========== chart three end

                // ================== chart four start
                const ctx4 = document.getElementById("Chart4").getContext("2d");
                const chart4 = new Chart(ctx4, {
                    type: "bar",
                    data: {
                        labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
                        datasets: [{
                                label: "",
                                backgroundColor: "#365CF5",
                                borderColor: "transparent",
                                borderRadius: 20,
                                borderWidth: 5,
                                barThickness: 20,
                                maxBarThickness: 20,
                                data: [600, 700, 1000, 700, 650, 800],
                            },
                            {
                                label: "",
                                backgroundColor: "#d50100",
                                borderColor: "transparent",
                                borderRadius: 20,
                                borderWidth: 5,
                                barThickness: 20,
                                maxBarThickness: 20,
                                data: [690, 740, 720, 1120, 876, 900],
                            },
                        ],
                    },
                    options: {
                        plugins: {
                            tooltip: {
                                backgroundColor: "#F3F6F8",
                                titleColor: "#8F92A1",
                                titleFontSize: 12,
                                bodyColor: "#171717",
                                bodyFont: {
                                    weight: "bold",
                                    size: 16,
                                },
                                multiKeyBackground: "transparent",
                                displayColors: false,
                                padding: {
                                    x: 30,
                                    y: 10,
                                },
                                bodyAlign: "center",
                                titleAlign: "center",
                                enabled: true,
                            },
                            legend: {
                                display: false,
                            },
                        },
                        layout: {
                            padding: {
                                top: 0,
                            },
                        },
                        responsive: true,
                        // maintainAspectRatio: false,
                        title: {
                            display: false,
                        },
                        scales: {
                            y: {
                                grid: {
                                    display: false,
                                    drawTicks: false,
                                    drawBorder: false,
                                },
                                ticks: {
                                    padding: 35,
                                    max: 1200,
                                    min: 0,
                                },
                            },
                            x: {
                                grid: {
                                    display: false,
                                    drawBorder: false,
                                    color: "rgba(143, 146, 161, .1)",
                                    zeroLineColor: "rgba(143, 146, 161, .1)",
                                },
                                ticks: {
                                    padding: 20,
                                },
                            },
                        },
                    },
                });
                // =========== chart four end
            </script>
            @include('admin.script')
        @endsection
    </main>
    <!-- ======== main-wrapper end =========== -->
@endsection