@extends('layouts.master')
@section('content')
<style>
    .carousel-indicators .active {
        background-color: #0038ba
    }

    .carousel-indicators li {
        background-color: #939393
    }

    ._product-RS h2 {
        font-size: 22px;
    }

    ._Cat {
        font-size: 14px
    }

    ._Cat strong {
        color: #282828;
        font-size: 14px;
        width: 120px;
    }

    .distTabs {
        margin-bottom: 30px;
        padding: 10px 20px 10px 20px;
    }

    .distTabs {
        margin-bottom: 30px;
        padding: 10px 20px 10px 20px
    }

    .distTabs .header-tabs {
        box-shadow: none;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        -ms-box-shadow: none;
        margin-bottom: 20px;
        border: none;
        border-bottom: solid 1px #d9dde1;
    }

    .distTabs .header-tabs .nav-tabs .nav-link {
        border-bottom: solid 1px #d9dde1;
    }

    .distTabs .header-tabs .nav-tabs .nav-item.show,
    .distTabs .header-tabs .nav-tabs .nav-link.active,
    .distTabs .header-tabs .nav-tabs .nav-link:HOVER {
        border-bottom: solid 2px #0038ba;
        color: #0038ba;
    }

    .overflow-x-div {
        overflow-x: auto;
    }

    .items-available {
        letter-spacing: 0.5px;
        font-size: 12px;
    }

    .items-available ul li {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .items-available h3 {
        border-bottom: solid 1px #dedede;
        padding-bottom: 8px;
        margin-bottom: 0;
    }

    .carousel-indicators {
        bottom: -10px;
    }

    .items-available th,
    .items-available td {
        padding: 8px 10px;
    }

    .items-available th {
        background-color: #f6f6f6;
        font-size: 14px;
        color: #0038ba;
        font-family: proximanova-semibold, sans-serif !important;
    }

</style>
<div class="row mt-2 mb-3">
    <div class="col-lg-6 col-md-6 col-sm-6">
        <h2 class="_head01">Product Detail</h2>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6">
        <ol class="breadcrumb">
            <li><a href="#"><span>Product Management</span></a></li>
            <li><span>Product Detail</span></li>
        </ol>
    </div>
</div>
<div class="row">
    <div class="col-12 mb-30">
        <div class="card top_border _product-D">
            <div class="row">
                <div class="col-md-4">
                    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                        <ol class="carousel-indicators">
                            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                            @foreach ($images as $key => $img)
                                <li data-target="#carouselExampleIndicators" data-slide-to="{{$key+1}}" class="active"></li>
                            @endforeach
                        </ol>
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <img style="max-height: 350px;" class="d-block w-100" src="{{$core->thumbnail}}" alt="">
                            </div>
                            @foreach ($images as $img)
                                <div class="carousel-item">
                                    <img style="max-height: 350px;" class="d-block w-100" src="{{$img->picture}}" alt="">
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
                <div class="col-md-8 _product-RS">
                    <h2>{{$core->item_name}}
                        {{-- <a href="#" class="btn add_button" style="top:0;right:15px;letter-spacing:1px"><i class="fa fa-pencil"></i>
                            <span>Edit</span></a> --}}
                    </h2>
                    <span class="_Cat"><strong>SKU: </strong>{{$core->item_name}} </span>
                    <span class="_Cat"><strong>Category: </strong>{{$core->main_cat}} </span>
                    <span class="_Cat"><strong>Sub Category: </strong>{{$core->sub_cat}} </span>
                    <span class="_Cat"><strong>Brand Name: </strong>{{$core->brand_name}} </span>
                    <span class="_Cat"><strong>Description: </strong>{{$core->item_main_description}}</span>
                    <div class="items-available">
                        <h3>Packaging</h3>
                        <div class="overflow-x-div">
                            <div style="width:max-content; min-width: 100%;">
                                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                    <tbody>
                                    </tbody>
                                    <thead>
                                        <tr>
                                            <th>Unit Name</th>
                                            <th>QTY.</th>
                                            <th>T.P.</th>
                                            @foreach ($segments as $seg)
                                                <th>{{$seg->name}}</th>
                                            @endforeach
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($data as $pref)
                                            <tr>
                                                <td>{{$pref['core']->unit_name}}</td>
                                                <td>{{$pref['core']->qty ? $pref['core']->qty : 0}}</td>
                                                <td>Rs. {{$pref['core']->item_trade_price}}</td>
                                                @foreach ($pref['disc'] as $dis)
                                                    <td>Rs. {{$pref['core']->item_trade_price - $dis}}</td>
                                                @endforeach
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12">
        <div class="card distTabs">
            <div class="row">
                <div class="col-md-12">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="header-tabs">
                                <div class="nav nav-tabs" id="nav-tab" role="tablist"> <a
                                        class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab"
                                        href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Stock
                                        Distributor <span class="_cus-val"> {{sizeof($stock)}} </span></a>
                                </div>
                            </div>
                            <div class="tab-content" id="nav-tabContent">
                                <div class="tab-pane fade show active body_sales_agants" id="nav-home" role="tabpanel"
                                    aria-labelledby="nav-home-tab">
                                    <table class="table table-hover dt-responsive nowrap" id="example"
                                        style="width:100%">
                                        <thead>
                                            <tr>
                                                <th>Distributor Name</th>
                                                <th>Region</th>
                                                <th>Available Stock</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($stock as $data)
                                                <tr>
                                                    <td>{{$data->distributor_name}}</td>
                                                    <td>{{$data->region_name}}</td>
                                                    <td>{{number_format($data->stock)}}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection