@extends('admin.layouts.master')


@section('title')
    تفاصيل الماليات
@endsection

@section('css')

@endsection


@section('content-header')
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0 text-dark">تفاصيل الماليات</h1>
                </div><!-- /.col -->
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item active">تفاصيل الماليات</li>
                    </ol>
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>
@endsection


@section('content')
    <section id="printSection">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <!-- Main content -->
                <div class="invoice p-3 mb-3">
                    <!-- title row -->
                    <div class="row">
                        <div class="col-12">
                            <h4>
                                فاروق جروب
                                <small class="float-right">Date : {{date('Y-m-d')}}</small>
                            </h4>
                        </div>
                        <!-- /.col -->
                    </div>
                    <!-- info row -->
                    <div class="row invoice-info">
                        <div class="col-sm-4 invoice-col">
                            الجهة الصادره
                            <address>
                                <strong>فاروق جروب</strong><br>
                                1 & 2 عمارات أبو الفتوح - محطة مدكور - الهرم - الجيزة - مصر<br>
                                Phone: 01100335441<br>
                                Email: consulting@faroukgroup.com
                            </address>
                        </div>
                        <!-- /.col -->
                        <div class="col-sm-4 invoice-col">
                            الي
                            <address>
                                <strong>{{$data->subscriber->name}}</strong><br>
                                {{$data->subscriber->address}}<br>
                                Phone:{{$data->subscriber->phone}}<br>
                                Email: {{$data->subscriber->email}}
                            </address>
                        </div>
                        <!-- /.col -->
                        <div class="col-sm-4 invoice-col">
                            <b>رقم الفاتوره {{$data->number}} </b><br>
                            <br>
                            <b>تاريخ الاشتراك:</b> {{$data->date}}<br>
                            <b>السعر:</b> {{$data->amount}} L.E<br>
                            <b> حاله الفاتوره:</b> {!! $data->status() !!}
                        </div>
                        <!-- /.col -->
                    </div>
                    <!-- /.row -->

                    <!-- Table row -->
                    <div class="row">
                        <div class="col-12 table-responsive">
                            <table class="table table-striped">
                                <thead>
                                <tr>
                                    <th>#</th>
                                    <th>المنتج</th>
                                    <th>السعر</th>
                                    <th>تاريخ  نهايه المنتجات</th>

                                </tr>
                                </thead>
                                <tbody>
                                @foreach($data->invoiceDetails as $row)
                                    <tr>
                                        <td>{{$loop->index + 1}}</td>
                                        <td>{{$row->name}}</td>
                                        <td>{{$row->price}}</td>
                                        <td>{{$row->features_subscription_id != null ? $row->sub_features_subscription->expired_date : $row->subscriber->expiry_data}}</td>

                                    </tr>
                                @endforeach


                                </tbody>
                            </table>
                        </div>
                        <!-- /.col -->
                    </div>
                    <!-- /.row -->

                    <div class="row">
                        <!-- accepted payments column -->
                        <div class="col-6">
                            <p class="lead">Payment Methods:</p>
                            <img src="{{asset('dash/dist/img/credit/visa.png')}}" alt="Visa">
                            <img src="{{asset('dash/dist/img/credit/mastercard.png')}}" alt="Mastercard">
                            <img src="{{asset('dash/dist/img/credit/american-express.png')}}" alt="American Express">
                            <img src="{{asset('dash/dist/img/credit/paypal2.png')}}" alt="Paypal">


                        </div>
                        <!-- /.col -->
                        <div class="col-6">
                            <p class="lead">تاريخ  الفاتوره  {{$data->date}}</p>

                            <div class="table-responsive">
                                <table class="table">
                                    <tr>
                                        <th style="width:50%">السعر قبل الخصم:</th>
                                        <td>L.E {{$data->sub_total ?? 0}}</td>
                                    </tr>

                                    <tr>
                                        <th>الخصم:</th>
                                        <td>L.E {{$data->discount ?? 0}}</td>
                                    </tr>
                                    <tr>
                                        <th>السعر النهائي:</th>
                                        <td>L.E {{$data->amount}}</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <!-- /.col -->
                    </div>
                    <!-- /.row -->

                    <!-- this row will not appear when printing -->
                    <div class="row no-print">
                        <div class="col-12">
                            <button id="printButton" class="btn btn-success"><i class="fas fa-print"></i> طباعة الفاتورة</button>
                        </div>
                    </div>
                </div>
                <!-- /.invoice -->
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.container-fluid -->

    </section>

@endsection

@section('js')


    <script>
        // Add an event listener to the button click
        document.getElementById('printButton').addEventListener('click', function() {
            // Show the print section
            document.getElementById('printSection').style.display = 'block';
            // Print only the print section
            window.print();
            // Hide the print section after printing is done
            document.getElementById('printSection').style.display = 'none';
        });
    </script>
@endsection