@extends('../layout/' . $layout)

@section('subhead')
    <title>Atarud MIS - Sell Book</title>
@endsection
<style type="text/css">
    .stu_pro tr td {
        padding: 1px;
    }

    .fileBtn:hover {
        cursor: progress;
        color: red;
    }
</style>
<link rel="stylesheet" href="{{ asset('dist/persianDatepicker/css/persianDatepicker-default.css') }}" />

@section('subcontent')
    <div class="intro-y flex items-center mt-8">
        <h2 class="text-lg font-medium mr-auto">Sell Book </h2>
    </div>
    {{-- <div class="grid grid-cols-12 gap-6"> --}}
    <div class="box ">

        <div class="col-span-12 lg:col-span-8 2xl:col-span-9 ">
            <form id="studentForm" action="{{ route('sellbook.store') }}" method="post" enctype="multipart/form-data">
                @csrf
                @method('post')
                <!-- BEGIN: Display Information -->

                <div class="intro-y box lg:mt-5">


                    <div class="flex items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400"
                        style="background-color: #292727; border-radius: 4px;">
                        <h2 class="font-medium text-base mr-auto" style="font-weight: bold; color:white;">Tusion
                            Information</h2>
                    </div>

                    <div class="p-5 box bg-primary/10">
                        <div class="flex flex-col-reverse xl:flex-row flex-col">
                            <div class="flex-1 mt-6 xl:mt-0">

                                <div class="grid grid-cols-12 gap-2">
                                    <div class="form-control col-span-3">
                                        <label for="field-2" class="control-label"> Program </label>

                                        <select name="program_id" class="form-control" data-validate="required"
                                            value="{{ old('program_id') }}" id="class_id"
                                            data-message-required="value_required "
                                            onchange="get_class_semesters(this.value)">
                                            <option value="">Select</option>

                                            @foreach ($programs as $row)
                                                <option value="{{ $row->id }}">
                                                    {{ $row->title }}
                                                </option>
                                            @endforeach

                                        </select>
                                    </div>
                                    <div class="form-control col-span-3">
                                        <label for="field-2" class="control-label">Select Student </label>

                                        <select name="student_id" class="form-control tom-select" data-placeholder="Select Student"
                                            value="{{ old('student_id') }}" id="student_id">
                                            <option value="">Select Student</option>
                                            @foreach ($students as $row)
                                                <option value="{{ $row->id }}">
                                                    {{ $row->id  }} | {{ $row->name  }} | {{ $row->fname }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <!--books count -->
                    <input type="hidden" name="count" id="count">
                    <!--materials or book book div -->
                    <div id="material">

                        <div class="flex items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400"
                            style="background-color: #292727; border-radius: 4px;">
                            <h2 class="font-medium text-base mr-auto" style="font-weight: bold; color:white;">Materials
                                Information</h2>
                        </div>
                        <!--books will display here -->
                        <div id="books" class="box bg-primary/10"></div>
                        <!--end of books display here -->

                    </div>
                    <!--end of materials or book book div -->


                    <div class="flex box items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400"
                        style="background-color: #292727; border-radius: 4px;">
                        <h2 class="font-medium text-base mr-auto" style="font-weight: bold; color:white;">Payment
                            Information</h2>
                    </div>

                    <div class="p-5 box bg-primary/10 ">
                        <div class="flex flex-col-reverse xl:flex-row flex-col">
                            <div class="flex-1 mt-6 xl:mt-0">

                                <div class="grid grid-cols-12 gap-2">
                                    <div class="form-control col-span-4 mt-2">
                                        <label class="control-label"> Amount</label>
                                        <input type="text" class="form-control" name="amount" id="amount"
                                            value="{{ old('amount') > 0 ? old('amount') : 0 }}"
                                             value="0" placeholder="Enter Total Amount" />
                                    </div>

                                    <div class="form-control col-span-4 mt-2" id="discountTitle">
                                        <label class="control-label"> Title </label>
                                        <input type="text" class="form-control" placeholder="Enter Title"
                                            name="title" value="{{ old('title') }}" id="title" />
                                    </div>

                                    <div class="form-control col-span-4 mt-2">
                                        <label class="control-label"> Date </label>
                                        <input type="text" placeholder="YYYY-0M-0D" class="form-control pdpF2" name="date" />
                                    </div>

                                    <div class="form-control col-span-4 mt-2">
                                        <label class="  control-label">Payment</label>
                                        <input type="text" class="form-control" name="payment" id="payment"
                                            value="{{ old('payment') }}"
                                            placeholder="Enter Payment Amount" />
                                    </div>
                                    <div class="intro-y col-span-12 sm:col-span-6 mt-2">
                                        <label for="input-wizard-4" class="control-label">Description</label>
                                        <br>
                                        <textarea name="description" id="" cols="76" rows="4" value="{{ old('description') }}"></textarea>
                                    </div>

                                </div>

                                <button type="submit" class="btn btn-primary mt-5" style="float: right;">Save</button>

                            </div>

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

    </div>
    <!-- END: Display Information -->

    </form>
    </div>
@endsection

@section('script')
<script src="{{ asset('dist/js/jquery.js') }}"></script>
<script src="{{ asset('dist/persianDatepicker/js/persianDatepicker.js') }}"></script>
<script>
    $(function () {

        $(".pdpF2").persianDatepicker({
            months: ["حمل", "ثور", "جوزا", "سرطان", "اسد", "سنبله", "میزان", "عقرب", "قوس", "جدی", "دلو", "حوت"],
            dowTitle: ["شنبه", "یکشنبه", "دوشنبه", "سه شنبه", "چهارشنبه", "پنج شنبه", "جمعه"],
            shortDowTitle: ["ش", "ی", "د", "س", "چ", "پ", "ج"],
            showGregorianDate: !1,
            persianNumbers: !0,
            formatDate: "YYYY/MM/DD",
            selectedBefore: !1,
            selectedDate: null,
            startDate: null,
            endDate: null,
            prevArrow: '\u25c4',
            nextArrow: '\u25ba',
            theme: 'default',
            alwaysShow: !1,
            selectableYears: null,
            selectableMonths: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
            cellWidth: 25, // by px
            cellHeight: 20, // by px
            fontSize: 13, // by px
            isRTL: !1,
            calendarPosition: {
                x: 0,
                y: 0,
            },
            onShow: function () {},
            onHide: function () {},
            onSelect: function () {},
            onRender: function () {}
    });


    });
</script>

    <script>
        var books = [];

        jQuery('#book_container').hide();
        jQuery('#material').hide();
        // print invoice function
        function PrintElem(elem) {
            Popup($(elem).html());
        }

        function Popup(data) {
            var mywindow = window.open('', 'invoice', 'height=600,width=850');
            mywindow.document.write('<html><head><title>Invoice</title>');
            mywindow.document.write('<link rel="stylesheet" href="assets/css/neon-theme.css" type="text/css" />');
            mywindow.document.write(
                '<link rel="stylesheet" href="assets/js/datatables/responsive/css/datatables.responsive.css" type="text/css" />'
            );
            mywindow.document.write('</head><body >');
            mywindow.document.write(data);
            mywindow.document.write('</body></html>');

            mywindow.print();
            mywindow.close();

            return true;
        }


        function get_class_semesters(program_id) {
            $.ajax({
                method: 'GET',
                url: "{{ url('/get/program/semester/') }}",
                data: {
                    p_id: program_id,
                },

                success: function(response) {
                    console.log(response);
                    jQuery('#semester_id').html(response);

                }
            });
            get_book(program_id);
        }

        // Change Material Fee Functionality
        function change_material_fee(book) {
            var id = book.dataset.id;
            var number = book.dataset.number;
            var selected_book_quantity = document.getElementById('book_amount' + number);
            var selected_book_checkbox = document.getElementById('book' + number);
            var price = book.dataset.price;
            var book_quantity = Number(selected_book_quantity.value);
            var total = 0;

            if (selected_book_checkbox.checked) {

                document.getElementById('total_book_amount' + number).value = Number(price) * book_quantity;
                $('input:hidden[class=total_book_amount]').each(function() {
                    total += Number($(this).val());
                });
                document.getElementById("amount").value = total;
                calculate();

            } else {
                document.getElementById('total_book_amount' + number).value = Number(0);
                $('input:hidden[class=total_book_amount]').each(function() {
                    total += Number($(this).val());
                });
                document.getElementById("amount").value = total;
                calculate();
            }
        }


        function get_book(program_id) {

            $.ajax({
                method: 'GET',
                url: "{{ url('/get/book/') }}",
                data: {
                    p_id: program_id,
                },

                success: function(response) {
                    console.log(response);
                    jQuery('#books').html(response[0]);
                    jQuery('#book_container').show();
                    jQuery('#material').show();
                    jQuery('#count').val(response[1]);
                }
            });

        }


    </script>
@endsection