@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>
                <!-- ========== title-wrapper end ========== -->
       
                <!-- End Row -->

                <div class="container-fluid">
                    <div class="row">
                        <div class="col-lg-8 mx-auto">
                            <div class="card-style mb-30 mt-30">
                                <div class="title d-flex justify-content-between align-items-center mb-30">
                                    <h6>Add New Crop</h6>
                                    <a href="{{ route('crops.index') }}"
                                        class="main-btn primary-btn-outline btn-hover py-2 btn-sm">
                                        <i class="lni lni-arrow-left mr-5"></i> Back to List
                                    </a>
                                </div>

                                <form action="{{ route('crops.store') }}" method="POST" enctype="multipart/form-data">
                                    @csrf
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="input-style-1">
                                                <label>Category Image</label>
                                                <input type="file" name="image">
                                                <p class="text-gray text-sm mt-1">Accepted formats: JPG, PNG, JPEG, WEBP
                                                    (Max 2MB)</p>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="input-style-1">
                                                <label>Crop Name</label>
                                                <input type="text" name="crop_name" value="{{ old('crop_name') }}"
                                                    placeholder="e.g. Wheat, Basmati Rice" required>
                                                @error('crop_name')
                                                    <span class="text-danger text-sm">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="col-12">
                                            <div class="input-style-1">
                                                <label>Description</label>
                                                <textarea name="description" rows="3"
                                                    placeholder="Enter a short description for this crop">{{ old('description') }}</textarea>
                                                @error('description')
                                                    <span class="text-danger text-sm">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="col-md-6">
                                            <div class="select-style-1">
                                                <label>Category</label>
                                                <div class="select-position">
                                                    <select name="category_id" required>
                                                        <option value="" selected disabled>Select Category</option>
                                                        @foreach ($categories as $category)
                                                            <option value="{{ $category->id }}"
                                                                {{ old('category_id') == $category->id ? 'selected' : '' }}>
                                                                {{ $category->category_name }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                @error('category_id')
                                                    <span class="text-danger text-sm">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="col-md-6">
                                            <div class="select-style-1">
                                                <label>Measure Unit</label>
                                                <div class="select-position">
                                                    <select name="unit" required>
                                                        <option value="" selected disabled>Select Unit</option>
                                                        @foreach ($units as $unit)
                                                            <option value="{{ $unit->id }}"
                                                                {{ old('default_measure_unit_id') == $unit->id || (isset($crop) && $crop->default_measure_unit_id == $unit->id) ? 'selected' : '' }}>
                                                                {{ $unit->unit_name }} ({{ $unit->short_code }})
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                @error('default_measure_unit_id')
                                                    <span class="text-danger text-sm">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="col-12 text-center">
                                            <button type="submit" class="main-btn primary-btn py-2 btn-hover">
                                                <i class="lni lni-plus mr-5"></i> Save Crop
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End Col -->
            </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