@extends('layouts.parents.master') 
@section('title')
    {{studentCommonName(auth()->guard('student')->user()->username).__(' | In Out Pass')}}
@endsection
@section('headerTitle')
  {{__('In Out Pass')}}
@endsection
@section('content')
<div class="content-wrapper">
    <section class="content-header">
     <!--  <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="{{route('student.parent.dashboard')}}">Home</a></li>
              <li class="breadcrumb-item active">In Out Pass</li>
            </ol>
          </div>
        </div>
      </div> -->
    </section>
    <style>
        body {
            font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
        }
        .text-danger strong {
                color: #9f181c;
            }
            .receipt-main {
                background: #ffffff none repeat scroll 0 0;
                border-bottom: 12px solid #333333;
                border-top: 12px solid #9f181c;
                margin-top: 50px;
                margin-bottom: 50px;
                padding: 40px 30px !important;
                position: relative;
                box-shadow: 0 1px 21px #acacac;
                color: #333333;
            }
            .receipt-main p {
                color: #333333;
                line-height: 1.42857;
            }
            .receipt-footer h1 {
                font-size: 15px;
                font-weight: 400 !important;
                margin: 0 !important;
            }
            .receipt-main::after {
                background: #414143 none repeat scroll 0 0;
                content: "";
                height: 5px;
                left: 0;
                position: absolute;
                right: 0;
                top: -13px;
            }
            .receipt-main thead {
                background: #414143 none repeat scroll 0 0;
            }
            .receipt-main thead th {
                color:#fff;
            }
            .receipt-right h5 {
                font-size: 16px;
                font-weight: bold;
                margin: 0 0 7px 0;
            }
            .receipt-right p {
                font-size: 12px;
                margin: 0px;
            }
            .receipt-right p i {
                text-align: center;
                width: 18px;
            }
            .receipt-main td {
                padding: 9px 20px !important;
            }
            .receipt-main th {
                padding: 13px 20px !important;
            }
            .receipt-main td {
                font-size: 13px;
                font-weight: initial !important;
            }
            .receipt-main td p:last-child {
                margin: 0;
                padding: 0;
            }	
            .receipt-main td h2 {
                font-size: 20px;
                font-weight: 900;
                margin: 0;
                text-transform: uppercase;
            }
            .receipt-header-mid .receipt-left h1 {
                font-weight: 100;
                margin: 34px 0 0;
                text-align: right;
                text-transform: uppercase;
            }
            .receipt-header-mid {
                margin: 24px 0;
                overflow: hidden;
            }
            
            #container {
                background-color: #dcdcdc;
            }
            .table-responsive.in-table {
    margin-top: 50px;
    padding-left: 20px;
}
table.table.table-bordered tr th {
    background: #000;
    color: #fff;
}

.receipt-main .col-md-6 {
    width: 100%;
    max-width: 100%;
    padding: 0;
}
.table-responsive.in-table {
    margin-top: 21px !important;
    padding-left: 0 !important;
}
    </style>
    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                <div class="receipt-main col-xs-10 col-sm-10 col-md-6 col-xs-offset-1 col-sm-offset-1 col-md-offset-3">
                                <div class="receipt-header">
                                    <div class="row">
                                        
                                            <div class="col-xs-6 col-sm-6 col-md-6">
                                                <div class="receipt-left">
                                                    <img class="img-responsive" alt="photomissing" src="{{studentPannelImage($responseData['studentDetail']->admno)}}" style="border-radius: 43px;">
                                                </div>
                                            </div>
                                            <div class="col-xs-6 col-sm-6 col-md-6 text-right">
                                                <div class="receipt-right">
                                                    <h5>{{schoolRedisDetail()['name']}}</h5>
                                                    <p>{{schoolRedisDetail()['phone1']}}<i class="fa fa-phone"></i></p>
                                                    <p>{{schoolRedisDetail()['address']}} <i class="fa fa-location-arrow"></i></p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>			
                                    <div class="receipt-header receipt-header-mid">
                                        <div class="row">
                                            <div class="col-xs-8 col-sm-8 col-md-8 text-left">
                                                <div class="receipt-right">
                                                    <h5>{{$responseData['studentDetail']->name}} |  Adm. Number : {{$responseData['studentDetail']->admno}}</small></h5>
                                                    <p><b>Mobile :</b> {{$responseData['studentDetail']->phn}}</p>
                                                    <p><b>Email :</b> {{$responseData['studentDetail']->f_email}}</p>
                                                    <p><b>Address :</b> {{$responseData['studentDetail']->ad1}},{{$responseData['studentDetail']->city}} PIN-{{$responseData['studentDetail']->pin}},{{$responseData['studentDetail']->state}}</p>
                                                </div>
                                            </div>
                                            <div class="col-xs-4 col-sm-4 col-md-4">
                                                <div class="receipt-right">
                                                    <h2 style="color:blue;text-align:center;">In-Pass</h2>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                <div class="col-md-6">
                                <div class="table-responsive in-table">
                                    <table class="table table-bordered">
                                        <thead>
                                            <tr>
                                                <th>Description</th>
                                                <th>Due</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>Fee Due</td>
                                                <td>{{$responseData['feeDetail']->balance??0.00}}</td>
                                            </tr>
                                            <tr>
                                                <td>D.F.E Due</td>
                                                <td>{{$responseData['ledgerDetail']->balance??0.00}}</td>
                                            </tr>
                                            <tr>
                                                <td>Block Name</td>
                                                <td>{{$responseData['studentDetail']->dorm??''}}</td>
                                            </tr>                                 
                                        </tbody>
                                    </table>
                                    <div class="receipt-header receipt-header-mid receipt-footer">
                                    <div class="col-xs-8 col-sm-8 col-md-8 text-left">
                                        <div class="receipt-right">
                                                <p>
                                                    <b style="color:Red">I am Reporting on :</b> 
                                                    @php 
                                                        $reportingDate = date('Y-m-d');
                                                        if(isset($responseData['outInDetail']->reporting_date) && $responseData['outInDetail']->reporting_date != '0000-00-00') {
                                                            $reportingDate = $responseData['outInDetail']->reporting_date;
                                                        }
                                                    @endphp
                                                    <input type="date" id="reporting_date" name="reporting_date" value="{{$reportingDate}}" required>
                                                </p>
                                                <h5 style="color: rgb(140, 140, 140);"></h5>
                                        </div>
                                    </div>
                                </div>
                                </div>
                               
                                </div>
        </div>
                            </div>			
                            <div class="row">
                               
                                <div class="col-xs-12 col-sm-12 col-md-12 text-center">
                                    <button onclick="saveAndPrint()" id="submitInOutPass" style="background-color: #0074d9; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer;">Save</button>
                                    <button onclick="saveAndPrint1()" id="submitInOutPass" style="background-color: #0074d9; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer;">Print</button>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div> 
@endsection
@push('web-scripts')
   <script>
        $(document).ready(async function() {
            dataTable("#parcelLedger");
        });

        async function saveAndPrint1() {
            var receiptContent = document.querySelector('.receipt-main').innerHTML;
            var originalContents = document.body.innerHTML;
            document.body.innerHTML = receiptContent;
            window.print();
            document.body.innerHTML = originalContents;
        }

        async function saveAndPrint() {
            let reportingDate = $('#reporting_date').val();
            let submitButton = $('#submitInOutPass');
            const options = {
                type:  'POST',
                data: {reportingDate:reportingDate},
                url:  "{{route('student.parent.in-pass-save')}}",
                headers: { Accept: "application/json" },
                dataType:'json',
                beforeSend: function () {
                    submitButton.prop('disabled', true).text('Submitting...'); 
                },
                complete: function () {
                    submitButton.prop('disabled', false).text("Save");
                }
            };
            try {
                const response = await ajaxRequest(options);
                if(response.success) {
                    $.NotificationApp.successMessageWithReload("Reporting date is updated successfully", true);
                }
            } catch (error) {
                console.log(error);
                if (error.status === 'error') {
                    const errors = error.xhr.responseJSON.errors;
                    await renderErrors(errors);
                } else {
                    alert('An error occurred. Please try again.');
                }
            }    
        }
   </script>
@endpush