@extends('admin.layout.master')
@push('css')
 <style>
     /* General Invoice Styles */
     .receipt {
         width: 100%;
         max-width: 100%;
         padding: 20px;
         border: 1px solid #ddd;
         border-radius: 8px;
         background-color: #f9f9f9;
         font-family: 'Arial', sans-serif;
     }

     .logo {
         font-size: 24pt;
         font-weight: bold;
         text-align: center;
         margin-bottom: 15px;
         color: #6a1b9a; /* Salon's branding color */
     }

     .address {
         text-align: center;
         font-size: 12pt;
         margin-bottom: 15px;
     }

     .contact {
         font-size: 10pt;
         margin-top: 5px;
         color: #555;
     }

     .invoice-details {
         font-size: 12pt;
         margin-bottom: 15px;
         padding-left: 20px;
         padding-right: 20px;
         border-bottom: 2px solid #ddd;
     }

     .invoice-details .detail {
         margin-bottom: 5px;
         font-weight: bold;
     }

     .service {
         display: flex;
         justify-content: space-between;
         padding: 10px 0;
         border-bottom: 1px solid #ddd;
     }

     .service .detail {
         width: 70%;
         font-size: 12pt;
     }

     .service .amount {
         width: 30%;
         font-size: 12pt;
         text-align: right;
     }

     .total {
         display: flex;
         justify-content: space-between;
         padding: 10px 0;
         font-size: 14pt;
         font-weight: bold;
     }

     .total-label {
         width: 70%;
     }

     .total-amount {
         width: 30%;
         text-align: right;
     }

     .payment {
         font-size: 12pt;
         margin-top: 15px;
         padding-left: 20px;
         padding-right: 20px;
         border-bottom: 2px solid #ddd;
     }

     .thank-you {
         margin-top: 20px;
         text-align: center;
         font-style: italic;
         font-size: 12pt;
         color: #444;
     }

     /* Print-specific Styles */
     @media print {
         body {
             font-family: "Arial", sans-serif;
             font-size: 12pt;
             margin: 0;
             padding: 0;
         }

         .receipt {
             max-width: 100%;
             padding: 10px;
             border: none;
         }

         .logo {
             font-size: 22pt;
             color: #6a1b9a;
         }

         .service .amount {
             font-weight: bold;
         }

         .total .total-amount {
             font-weight: bold;
         }

         .thank-you {
             font-size: 11pt;
             color: #333;
         }

         /* Add a border around the receipt for a polished look */
         .receipt {
             border: 1px solid #ccc;
         }

         .service {
             border-bottom: 1px dashed #ddd;
         }

         .total {
             border-top: 2px solid #ddd;
             padding-top: 10px;
         }
     }

 </style>
@endpush
@section('content')

    <!-- BEGIN: Content-->
    <div class="content-body">
        <!-- invoice functionality start -->
        <section class="invoice-print mb-1">
            <div class="row">

                {{--                <fieldset class="col-12 col-md-5 mb-1 mb-md-0">--}}
                {{--                    <div class="input-group">--}}
                {{--                        <input type="text" class="form-control" placeholder="Email" aria-describedby="button-addon2">--}}
                {{--                        <div class="input-group-append" id="button-addon2">--}}
                {{--                            <button class="btn btn-outline-primary" type="button">Send Invoice</button>--}}
                {{--                        </div>--}}
                {{--                    </div>--}}
                {{--                </fieldset>--}}
                <div class="col-12 col-md-7 d-flex flex-column flex-md-row justify-content-end">
                    <button class="btn btn-primary btn-print mb-1 mb-md-0" onclick="printInvoice()">
                        <i class="feather icon-file-text"></i> @lang('admin.print')
                    </button>
                    {{--                    <button class="btn btn-outline-primary  ml-0 ml-md-1"> <i class="feather icon-download"></i> Download</button>--}}
                </div>
            </div>
        </section>