@php
    $status = [
        0 => ['text' => 'Deactive', 'class' => 'badge badge-warning badge-pill'],
        1 => ['text' => 'Active', 'class' => 'badge badge-info badge-pill'],
    ];

    $current = $status[$showDetails->status] ?? [
        'text' => 'Unknown',
        'class' => 'badge rounded-pill bg-secondary',
    ];
@endphp

@extends('admin.layouts.layouts')

@section('title', 'View Product')

@section('page-css')
    <style>
        .text-link {
            color: #007bff !important;
            text-decoration: none !important;
            cursor: pointer !important;
        }

        .custom-width {
            max-width: 800px;
        }
    </style>
@endsection

@section('content')

    {{-- Add Stock Modal --}}
    <div class="modal fade" id="newStockModal" tabindex="-1" role="dialog" aria-labelledby="newStockModalLabel"
        aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="newStockModalLabel">New Stock</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="stockForm" action="javascript:void(0)" method="POST" enctype="multipart/form-data"
                    autocomplete="off">
                    @csrf
                    <input type="hidden" name="id" id="id" value="{{ $showDetails->id }}">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <input type="text" name="stock" id="stock" class="form-control input number"
                                        placeholder="Enter Stock" data-parsley-trigger="keyup" data-parsley-type="digits" data-parsley-type-message="Please enter valid stock">
                                    <span class="invalid-feedback" id="stock-error"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <a class="btn btn-primary" id="saveBtn">ADD</a>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Product Stock Details Modal --}}
    <div class="modal fade" id="stockDetailsModal" tabindex="-1" role="dialog" aria-labelledby="stockDetailsModalLabel"
        aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog custom-width" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="stockDetailsModalLabel">Product Stock Details</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="modal-body">
                </div>
            </div>
        </div>
    </div>

    <div class="page-header">
        <h3 class="page-title">
            Product
        </h3>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ route('product.index') }}">Products</a></li>
                <li class="breadcrumb-item active" aria-current="page">Details</li>
            </ol>
        </nav>
    </div>

    <div class="container py-4">
        <div class="card shadow-sm rounded border-0">
            <div class="card-header bg-light d-flex justify-content-between align-items-center">
                <h5 class="mb-0 fw-bold">Product Details</h5>
                <div>
                    <a href="{{ route('product.index') }}" class="btn btn-primary btn-sm">
                        <i class="fa-solid fa-arrow-left"></i> <span>Back</span>
                    </a>
                    <a class="btn btn-primary btn-sm" id="addStockBtn">
                        <i class="fa-solid fa-plus"></i> <span>Add Stock</span>
                    </a>
                </div>
            </div>
            <div class="card-body bg-white">
                <div class="row">
                    <div class="col-md-6">
                        <div class="row mb-2">
                            <div class="col-md-3 text-dark"><strong>ID:</strong></div>
                            <div class="col-md-9">{{ $showDetails->id ?? '' }}</div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-md-3 text-dark"><strong>Name:</strong></div>
                            <div class="col-md-9">{{ $showDetails->name ?? '-' }}</div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-md-3 text-dark"><strong>Effective Date:</strong></div>
                            <div class="col-md-9">
                                {{ $showDetails->effective_date ? date('d-m-Y', strtotime($showDetails->effective_date)) : '' }}
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-md-3 text-dark"><strong>Buying Price:</strong></div>
                            <div class="col-md-9">{{ number_format($showDetails->rate ?? 0, 2) }}</div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-md-3 text-dark"><strong>Created Date:</strong></div>
                            <div class="col-md-9">
                                {{ $showDetails->created_at ? date('d-m-Y', strtotime($showDetails->created_at)) : '' }}
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-md-3 text-dark"><strong>Status:</strong></div>
                            <div class="col-md-9">
                                <span
                                    class="badge rounded-pill px-2 py-1 {{ $current['class'] }}">{{ $current['text'] }}</span>
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-md-3 text-dark"><strong>Description:</strong></div>
                            <div class="col-md-9">
                                {{ strip_tags(html_entity_decode($showDetails->description)) ?? '' }}
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="row mb-2">
                            <div class="col-md-3 text-dark"><strong>Product Type:</strong></div>
                            <div class="col-md-9">{{ $showDetails->productType->name ?? '' }}</div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-md-3 text-dark"><b>Size:</b></div>
                            <div class="col-md-9">
                                {{ number_format($showDetails->size_value ?? 0, 0) }}
                                <strong class="text-dark">{{ $showDetails->size->name ?? '' }}</strong>
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-md-3 text-dark"><strong>Opening Stock:</strong></div>
                            <div class="col-md-9">
                                {{ number_format($showDetails->opening_stock ?? 0, 0) }}
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-md-3 text-dark"><strong>Selling Price:</strong></div>
                            <div class="col-md-9">{{ number_format($showDetails->selling_price ?? 0, 2) }}</div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-md-3 text-dark"><strong>Created By:</strong></div>
                            <div class="col-md-9">{{ $showDetails->users->name ?? '-' }}</div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-md-3 text-dark"><strong>Image:</strong></div>
                            <div class="col-md-9">
                                @if ($showDetails->image)
                                    <img src="{{ asset('storage/' . $showDetails->image) }}" alt="Pesticide Image"
                                        class="img-fluid" width="100" height="100">
                                @else
                                    <span class="text-muted">No image available</span>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container py-4">
        <div class="card shadow-sm rounded border-0">
            <div class="card-header bg-light d-flex justify-content-between align-items-center">
                <h5 class="mb-0 fw-bold">Product History</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-12">
                        <div class="table-responsive">
                            <table id="product-history-table" class="table w-100">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>Name</th>
                                        <th>Buying Price</th>
                                        <th>Selling Price</th>
                                        <th>Effective Date</th>
                                        <th>Updated Date</th>
                                        <th>Updated By</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container py-4">
        <div class="card shadow-sm rounded border-0">
            <div class="card-header bg-light d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Product Daily Stock</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-12">
                        <div class="table-responsive">
                            <table id="daily-stock-table" class="table w-100">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Date</th>
                                        <th>Stock</th>
                                        <th>Buying</th>
                                        <th>Selling</th>
                                        <th>Buying Price</th>
                                        <th>Selling Price</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('page-js')
    <script type="text/javascript">
        var updateHistory = false;
        var productId = "{{ $showDetails->id }}";
        var productIndexURL = "{{ route('product.index') }}";
        var productStore = "{{ route('product.store') }}";
        var productAjaxList = "{{ route('product-list') }}";
        var productHistoryAjaxList = "{{ route('product-history-list') }}";
        var dailyStockAjaxList = "{{ route('product.daily-stock') }}";
        var addStockURL = "{{ route('product.add-stock') }}";

        // Get product stock details
        function productStockDetails(id) {
            let detailsUrl = "{{ route('product.stock-details', ':id') }}";
            detailsUrl = detailsUrl.replace(':id', id);
            $('#stockDetailsModal #modal-body').html('');
            $.ajax({
                type: "GET",
                url: detailsUrl,
                dataType: "JSON",
                success: function(response) {
                    $('#stockDetailsModal #modal-body').html(response);
                    $('#stockDetailsModal').modal('show');
                }
            });
        }
    </script>
    <script src="{{ asset('assets/js/admin/product.js') }}"></script>
@endsection