@extends('layouts.app')

@section('title')
    Quotation
@endsection

@push('custom-css')
    <style>
        @media print {
            * {
                visibility: hidden;
            }

            #printable * {
                visibility: visible !important;
            }
        }
    </style>
@endpush

@section('content')
    <div class="page-content-wrapper">
        <div class="page-content">
            <div class="page-bar">
            </div>

            @if (session('success'))
                <div class="alert alert-success alert-dismissible show" role="alert">
                    <strong>{{ session('success') }}</strong><a href="#" class="alert-link"></a>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                        <span aria-hidden="false"></span>
                    </button>
                </div>
            @elseif(session('error'))
                <div class="alert alert-danger alert-dismissible show" role="alert">
                    <strong>{{ session('error') }}</strong><a href="#" class="alert-link"></a>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                        <span aria-hidden="false"></span>
                    </button>
                </div>
            @endif
            <div class="row">
                <div class="col-md-12">
                    <div class="text-right">
                        <button onclick="javascript:window.print();" class="btn btn-info btn-outline " type="button">
                            <span><i class="fa fa-print"></i> Print</span> </button>
                    </div>
                    <div id="printable" class="white-box">
                        <h3><b>QUOTATION</b> <span class="pull-right">QUOTATION#: {{ $request->quotation_no }}</span></h3>
                        <hr>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="pull-left">
                                    <address>
                                        <address>
                                            <img src="{{ asset('/public/Images/' . $institution->institution_logo_path) }}"
                                                width="100px;" alt="logo" class="logo-default">
                                            <p class="text-muted m-l-5">
                                                {{ $institution->institution_name }}, <br>
                                                {{ $institution->institution_address }} <br>
                                            </p>
                                        </address>
                                </div>
                                <div class="pull-right text-right">
                                    <address>
                                        <p class="addr-font-h3">To,</p>
                                        <p class="font-bold addr-font-h4">{{ $request->full_name }}</p>
                                        <p class="text-muted m-l-30">
                                            {{ $user->address }}
                                        </p>
                                        <p class="m-t-30">
                                            <b>Date :</b> <i class="fa fa-calendar"></i> {{ date('d-m-Y') }}
                                        </p>
                                        <p>
                                            <b>Program :</b> {{ $student->program_name }}
                                        </p>
                                    </address>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="table-responsive m-t-40">
                                    <table class="table table-hover">
                                        <thead>
                                            <tr>
                                                <th class="text-center">#</th>
                                                <th class="text-right">Fees Type</th>
                                                <th class="text-right">Amount</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td class="text-center">1</td>
                                                <td class="text-right">Program Fees</td>
                                                <td class="text-right">K{{ number_format($program_fees->program_amount) }}
                                                </td>
                                            </tr>
                                            @foreach ($other_fees as $other_fee)
                                                <tr>
                                                    <td class="text-center">{{ $loop->index + 2 }}</td>
                                                    <td class="text-right">{{ $other_fee->fee_name }}</td>
                                                    <td class="text-right">K{{ number_format($other_fee->fee_amount) }}
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="pull-right m-t-30 text-right">
                                    <p class="bold">Minimum amount to pay : K{{ number_format($minimum_amount) }}</p>
                                    <hr>
                                    <h3><b>Total
                                            :</b>K{{ number_format($program_fees->program_amount + $other_fees_total) }}
                                    </h3>
                                </div>
                                <div class="clearfix"></div>
                                <hr>

                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
@endsection