@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 -->

                <form action="{{ route('vendor_rates.update', $rate->id) }}" method="POST">
                    @csrf
                    @method('PUT')

                    <div class="row">
                        {{-- Left Column: Market Visibility & Date --}}
                        <div class="col-md-5">
                            <div class="card mb-3">
                                <div class="card-body">
                                    <h5 class="mb-3">Marketplace Settings</h5>

                                    <ul class="list-group list-group-flush">
                                        <li
                                            class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
                                            <h6 class="mb-0"><i class="lni lni-world text-primary me-2"></i>Marketplace
                                            </h6>
                                            <div class="form-check form-switch">
                                                {{-- DO NOT add a hidden input here if you use $request->has() in the controller --}}
                                                <input class="form-check-input" type="checkbox"
                                                    name="display_on_marketplace" id="display_on_marketplace" value="1"
                                                    {{ $rate->display_on_marketplace ? 'checked' : '' }}>
                                            </div>
                                        </li>

                                        <li
                                            class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
                                            <h6 class="mb-0"><i class="lni lni-calendar text-danger me-2"></i>Effective
                                                Date</h6>
                                            <input type="date" name="effective_date"
                                                class="form-control form-control-sm w-50"
                                                value="{{ old('effective_date', $rate->effective_date->format('Y-m-d')) }}">
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        {{-- Right Column: Pricing & Relational Details --}}
                        <div class="col-md-7 pe-md-0">
                            <div class="card mb-3">
                                <div class="card-body">
                                    <h5 class="mb-3">Pricing Details</h5>

                                    {{-- Vendor Selection (Read-only or Select) --}}
                                    <div class="row mb-3">
                                        <div class="col-sm-4">
                                            <h6 class="mb-0 text-muted">Vendor</h6>
                                        </div>
                                        <div class="col-sm-8">
                                            {{-- Display as plain text with a slight background or border for clarity --}}
                                            <div class="form-control-plaintext fw-bold px-2"
                                                style="background-color: #f8f9fa; border-radius: 4px;">
                                                {{ $rate->vendor->vendor_name ?? 'N/A' }}
                                            </div>

                                            {{-- Crucial: Hidden input to ensure the vendor_id is submitted with the form --}}
                                            <input type="hidden" name="vendor_id" value="{{ $rate->vendor_id }}">
                                        </div>
                                    </div>

                                    {{-- Crop Selection --}}
                                    <div class="row mb-3">
                                        <div class="col-sm-4">
                                            <h6 class="mb-0 text-muted">Crop</h6>
                                        </div>
                                        <div class="col-sm-8">
                                            <select name="crop_id" class="form-select">
                                                @foreach ($crops as $crop)
                                                    <option value="{{ $crop->id }}"
                                                        {{ $rate->crop_id == $crop->id ? 'selected' : '' }}>
                                                        {{ $crop->crop_name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    {{-- Min and Max Rates --}}
                                    <div class="row mb-3">
                                        <div class="col-sm-4">
                                            <h6 class="mb-0 text-muted">Rate Range</h6>
                                        </div>
                                        <div class="col-sm-4">
                                            <label class="text-xs text-gray">Min Rate</label>
                                            <input type="number" step="0.01" name="min_rate" class="form-control"
                                                value="{{ old('min_rate', $rate->min_rate) }}">
                                        </div>
                                        <div class="col-sm-4">
                                            <label class="text-xs text-gray">Max Rate</label>
                                            <input type="number" step="0.01" name="max_rate" class="form-control"
                                                value="{{ old('max_rate', $rate->max_rate) }}">
                                        </div>
                                    </div>

                                    {{-- Measure Unit --}}
                                    <div class="row mb-3">
                                        <div class="col-sm-4">
                                            <h6 class="mb-0 text-muted">Measure Unit</h6>
                                        </div>
                                        <div class="col-sm-8">
                                            <select name="measure_unit_id" class="form-select">
                                                @foreach ($units as $unit)
                                                    <option value="{{ $unit->id }}"
                                                        {{ $rate->measure_unit_id == $unit->id ? 'selected' : '' }}>
                                                        {{ $unit->unit_name }} ({{ $unit->short_code }})
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <hr>
                                    <div class="row">
                                        <div class="col-sm-12 d-flex gap-2">
                                            <button type="submit" class="main-btn primary-btn btn-hover py-2">Update Rate
                                                Card</button>
                                            <a href="{{ route('vendor_rates.index') }}"
                                                class="btn btn-outline-secondary px-5">Cancel</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
                <!-- 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