@extends("../dashboard._blank")
@include("../dashboard.Boutique.check_is_user_boutique")

@section("sidebar")
@include("../dashboard._sidebar")
@endsection

@section('css_add')
<style>
    .list-media {
        display: inline-block;
        text-align: center;
    }

    .list-media div {
        margin-left: 3%;
    }

    .inputfile {
        width: 0.1px;
        height: 0.1px;
        opacity: 0;
        overflow: hidden;
        position: absolute;
        z-index: -1;
    }

    .inputfile+label {
        font-size: 1em;
        display: inline-block;
    }

    .inputfile:focus+label,
    .inputfile+label:hover {}

    .inputfile+label {
        cursor: pointer;
        /* "hand" cursor */
    }

    .inputfile:focus+label {
        outline: 1px dotted #000;
        outline: -webkit-focus-ring-color auto 5px;
    }

    #upload:hover {
        color: #D40025;
        border: #D40025 2px solid;
    }

    #selectedFiles img {
        max-width: 125px;
        max-height: 125px;
        float: left;
        margin-bottom: 10px;
    }

    #upload2 {}

    #upload2:hover {
        color: #D40025;
        border: #D40025 2px solid;
    }

    #selectedFiles2 img {
        max-width: 125px;
        max-height: 125px;
        float: left;
        margin-bottom: 10px;
    }

    .error {
        color: red;
    }

    .btn {
        border-radius: 0px;
    }

    .article_catalogue_show {
        border: 1px solid #ddd;
        margin-top: 5px;
    }

    :root {
        --card-line-height: 1.2em;
        --card-padding: 1em;
        --card-radius: 0.5em;
        --color-green: #558309;
        --color-gray: #e2ebf6;
        --color-dark-gray: #c4d1e1;
        --radio-border-width: 2px;
        --radio-size: 1.5em;
    }

    .grid {
        display: grid;
        grid-gap: var(--card-padding);
        margin: 0 auto;
        max-width: 60em;
        padding: 0;

        @media (min-width: 42em) {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    .card {
        background-color: #fff;
        border-radius: var(--card-radius);
        position: relative;

        &:hover {
            box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15);
        }
    }

    .radio {
        font-size: inherit;
        margin: 0;
        position: absolute;
        right: calc(var(--card-padding) + var(--radio-border-width));
        top: calc(var(--card-padding) + var(--radio-border-width));
    }

    @supports(-webkit-appearance: none) or (-moz-appearance: none) {
        .radio {
            -webkit-appearance: none;
            -moz-appearance: none;
            background: #fff;
            border: var(--radio-border-width) solid var(--color-gray);
            border-radius: 50%;
            cursor: pointer;
            height: var(--radio-size);
            outline: none;
            transition:
                background 0.2s ease-out,
                border-color 0.2s ease-out;
            width: var(--radio-size);

            &::after {
                border: var(--radio-border-width) solid #fff;
                border-top: 0;
                border-left: 0;
                content: '';
                display: block;
                height: 0.75rem;
                left: 25%;
                position: absolute;
                top: 50%;
                transform:
                    rotate(45deg) translate(-50%, -50%);
                width: 0.375rem;
            }

            &:checked {
                background: var(--color-green);
                border-color: var(--color-green);
            }
        }

        .card:hover .radio {
            border-color: var(--color-dark-gray);

            &:checked {
                border-color: var(--color-green);
            }
        }
    }

    .plan-details {
        border: var(--radio-border-width) solid var(--color-gray);
        border-radius: var(--card-radius);
        cursor: pointer;
        display: flex;
        flex-direction: column;
        padding: var(--card-padding);
        transition: border-color 0.2s ease-out;
    }

    .card:hover .plan-details {
        border-color: var(--color-dark-gray);
    }

    .radio:checked~.plan-details {
        border-color: var(--color-green);
    }

    .radio:focus~.plan-details {
        box-shadow: 0 0 0 2px var(--color-dark-gray);
    }

    .radio:disabled~.plan-details {
        color: var(--color-dark-gray);
        cursor: default;
    }

    .radio:disabled~.plan-details .plan-type {
        color: var(--color-dark-gray);
    }

    .card:hover .radio:disabled~.plan-details {
        border-color: var(--color-gray);
        box-shadow: none;
    }

    .card:hover .radio:disabled {
        border-color: var(--color-gray);
    }

    .plan-type {
        color: var(--color-green);
        font-size: 1.5rem;
        font-weight: bold;
        line-height: 1em;
    }

    .plan-cost {
        font-size: 2.5rem;
        font-weight: bold;
        padding: 0.5rem 0;
    }

    .slash {
        font-weight: normal;
    }

    .plan-cycle {
        font-size: 2rem;
        font-variant: none;
        border-bottom: none;
        cursor: inherit;
        text-decoration: none;
    }

    .hidden-visually {
        border: 0;
        clip: rect(0, 0, 0, 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }
</style>
@endsection

@section("content")
<div class="right_col" role="main">
    <div class="">
        <div class="clearfix"></div>
        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                    <div class="x_title">
                        <div class="row">
                            <h2 class="col-md-6 col-xs-12"><img src="{{asset('images/produit.png')}}" alt=""
                                    width="20px"> Historique des gains <small> Retrouver les détails des produits vendus et les profits.</small></h2>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content">
                        @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul>
                                @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                        @endif
                        @if(session("success"))

                        <div class="alert alert-success">
                            {{session('success')}}
                        </div>

                        @elseif(session("error"))
                        <div class="alert alert-danger">
                            {{session('error')}}
                        </div>
                        @endif

                        <div class="row">
                            <table id="articledatatable-buttons" class="table table-responsive-xs table-bordered">
                                <thead>
                                    <tr>
                                        <th>N°</th>
                                        <th title="reference de l'article">ref</th>
                                        <th title="nom de l'article">Intitulé</th>
                                        <th title="Image de l'article">Image</th>
                                        <th title="Boutique">Boutique</th>
                                        <th title="prix de vente de l'article">Prix en XOF</th>
                                        <th title="Gain par article">Gain par produit</th>
                                        <th title="Quantité de l'article">Quantité</th>
                                        <th title="Gain total">Gain total</th>
                                        {{-- <th>
                                            <div style="display: flex; justify-content:end;">
                                                <div></div>
                                                <div>Action</div>
                                            </div>
                                        </th> --}}
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($histories as $index => $item)
                                    <tr>
                                        <td>{{$loop->index + 1}}</td>
                                        <td>{{$item->article->reference}}</td>
                                        <td>{{$item->article->name}}</td>
                                        <td class="text-center"> <img
                                            src="{{url('storage/productor_products/'.$item->article->file)}}"
                                            alt="{{$item->article->file}}" style="height: 40px"></td>
                                        <td>
                                            <a class="btn btn-default btn-sm" style="border-radius: 0px"
                                            href="{{route('boutique.index',$item->boutique->nom_boutique)}}" target="_blank"><i
                                                class="fas fa-store"></i> {{$item->boutique->nom_boutique}} </a>
                                        </td>
                                        <td><span class="badge badge-primary">{{$item->article_price ?? $item->article->price}} XOF</span> </td>
                                        <td>{{$item->gain}} XOF</td>
                                        <td><span class="badge badge-info">x{{$item->quantity}}</span></td>
                                        <td><span class="badge badge-success">{{$item->profit}} XOF</span></td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                            <div style="float: right !important;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('script')
<script>

</script>
@endsection