@extends('newDashboard.index')

@section('css')
    <link rel="stylesheet" href="{{ asset('metronic/css/data-table.css') }}">
    <style type="text/css" media="print">
        /* Define styles for printing */
        .modal-content {
            overflow: visible !important;
            /* Ensure all content is visible */
            height: auto !important;
            /* Set height to auto to allow content to expand */
        }

        .modal-body {
            max-height: none !important;
            /* Allow the body to expand */
            overflow: visible !important;
            /* Ensure all content is visible */
        }

        .modal-footer {
            display: none;
            /* Hide modal footer in print */
        }

        @media print {
            .modal-body .transaction-detail {
                display: flex;
                flex-wrap: wrap;
            }

            .modal-body .transaction-detail {
                flex: 0 0 33%;
                /* Adjust the width as needed */
                padding: 5px;
            }
        }
    </style>
@endsection

@section('main-content')
    <div class="content-wrapper">
        <div class="page-header">
            <h3 class="page-title">
                <span class="page-title-icon bg-gradient-primary text-white me-2">
                    <i class="fa-solid fa-file-lines menu-icon"></i>
                </span> {{ __('messages.Generate Report') }}
            </h3>
        </div>
        <div class="row justify-content-md-center">
            <div id="daily-restrictions-report-container">
                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul class="m-2">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                <div id="date_error" style="color: red;"></div>

                <form id="" method="POST" action="" class="row justify-content-center align-items-center">
                    @csrf
                    <input type="hidden" id="form-route" value="{{ route('daily.restrictions.report') }}">
                    <input type="hidden" id="report-detail" value="{{ route('daily.restrictions.report.detail') }}">
                    <input type="hidden" id="report-print-route"
                        value="{{ route('daily.restrictions.report.print.data') }}">

                    <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-4">
                        <label class="required">{{ __('messages.From') }}</label>
                        <input id="from_date" type="date" class="form-control" name="from_date" required>
                    </div>
                    <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-4">
                        <label class="required">{{ __('messages.To') }}</label>
                        <input id="to_date" type="date" class="form-control" name="to_date" required>
                    </div>
                    <div class="col-12 col-sm-12 col-md-4 col-lg-3 col-xl-2 mt-3 mt-md-0">
                        <button class="btn btn-primary btn-block">{{ __('messages.Submit') }}</button>
                    </div>
                </form>
            </div>
            <div id="trial-balance-list" class="table-responsive">
                <table class="trial-balance-table table">
                    <thead>
                        <tr>
                            <th scope="col">{{ __('messages.ID') }}</th>
                            <th scope="col">{{ __('messages.Serial') }}</th>
                            <th scope="col">{{ __('messages.Transaction') }}</th>
                            <th scope="col">{{ __('messages.Sub Account') }}</th>
                            <th scope="col">{{ __('messages.Main Account') }}</th>
                            <th scope="col">{{ __('messages.Amount') }}</th>
                            <th scope="col"></th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="modal fade " id="reportDetailModal" tabindex="-1" aria-labelledby="exampleModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="exampleModalLabel">{{ __('messages.Daily Transactions') }}</h4>
                        <h4 class="modal-title" id="trialBalanceName"></h4>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body daily-transaction-modal-body row">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary"
                            data-bs-dismiss="modal">{{ __('messages.Close') }}</button>

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


    @endsection

    @section('scripts')
        <script>
            var translations = {
                title: "{{ __('messages.Daily Transactions') }}",
                print: "{{ __('messages.Print') }}",
                id: "{{ __('messages.ID') }}",
                description: "{{ __('messages.Description') }}",
                credit: "{{ __('messages.Credit') }}",
                debit: "{{ __('messages.Debit') }}",
                accountAmount: "{{ __('messages.Account Amount') }}",
                createdAt: "{{ __('messages.Created At') }}",
                transaction: "{{ __('messages.Transaction') }}",
                date: "{{ __('messages.Date') }}",
                serial: "{{ __('messages.Serial') }}"
            };
        </script>
        <script></script>
        <script src="{{ asset('metronic/js/pages/pick-daily-restrictions-report-date.js') }}"></script>
    @endsection