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

@section('subhead')
    <title>Atarud MIS - Edit Boo</title>
@endsection
<style type="text/css">
    .stu_pro tr td {
        padding: 1px;
    }
</style>
@section('subcontent')
    <div class="intro-y flex items-center mt-8">
        <h2 class="text-lg font-medium mr-auto">Edit Invoice: ({{ $book->name }})</h2>
    </div>
    <div class="grid grid-cols-12 gap-6">
       
        <div class="col-span-12 lg:col-span-8 2xl:col-span-9">
           
            <!-- BEGIN: Personal Information -->
            <div class="intro-y box mt-5">
                <div class="flex items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400">
                    <h2 class="font-medium text-base mr-auto">Book Information</h2>
                </div>
                <form action="{{ route('book.update', $book->id) }}" method="post" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                <div class="p-5">
                    <div class="grid grid-cols-12 gap-x-5">
                        <div class="col-span-12 xl:col-span-6">
                            <div>
                                <label for="update-profile-form-6" class="form-label">Program</label>
                                        <select id="class_id" class="form-select" name="program_id" onchange="get_class_semesters(this.value)">
                                            <option>Select Program</option>
                                            @foreach ($programs as $row)
                                                <option value="{{ $row->id }}" @if($row->id == $book->class_id) selected @endif>{{ $row->title }}</option>
                                            @endforeach
                                        </select>
                            </div>
                            <div class="mt-3">
                                <label for="update-profile-form-6" class="form-label">Description</label>
                                <input type="text" name="description" class="form-control block mx-auto" data-single-mode="true" value="{{ $book->description }}">

                            </div>
                            <div class="mt-3">
                                <label for="update-profile-form-13" class="form-label">Author</label>
                                <input type="text" name="author" class="form-control  block mx-auto" data-single-mode="true" value="{{ $book->author }}">
                            </div>
                            <div class="mt-3">
                                <label for="update-profile-form-13" class="form-label">File</label>
                                <input type="file" name="document" class="form-control  block mx-auto">
                            </div>
                           
                           
                         
                        </div>
                        <div class="col-span-12 xl:col-span-6">
                            <div class="mt-3 xl:mt-0">
                                <label for="update-profile-form-6" class="form-label">Name</label>
                                <input type="text" name="name" class="form-control  block mx-auto" data-single-mode="true" value="{{ $book->name }}">

                            </div>
                            <div class="mt-3">
                                <label for="update-profile-form-6" class="form-label">Price</label>
                                <input type="text" name="price" class="form-control  block mx-auto" data-single-mode="true" value="{{ $book->price }}">

                            </div>
                            
                            <div class="mt-3">
                                <label for="update-profile-form-6" class="form-label">In Stock</label>
                                <input type="text" name="in_stock" class="form-control  block mx-auto" data-single-mode="true" value="{{ $book->in_stock }}">

                            </div>
                            
                        </div>
                       
                    </div>
                    <div class="flex justify-end mt-4">
                        <button type="submit" class="btn btn-primary w-20 mr-auto">Save</button>
                    </form>

                    
                        
                    </div>
                </div>
            </div>
            <!-- END: Personal Information -->
        </div>
    </div>
@endsection
@section('script')
    <script src="{{ asset('dist/js/jquery.js') }}"></script>
 
    <script>
        $(document).ready(function() {
        
          var img =  document.getElementById('st_img');
          var fl =  document.getElementById('image');
          fl.onchange = evt => {
            const [file] = fl.files;
            if(file){
                img.src = URL.createObjectURL(file);
            }
          }
        });

        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);

                }
            });
        }
        function get_section_courses(section_id) {
            $.ajax({
                method: 'GET',
                url: "{{ url('/get/section/course/') }}",
                data: {
                    s_id: section_id,
                },

                success: function(response) {
                    jQuery('#section_selector_holder').html(response);

                }
            });

        }
        function getSection(semester_id) {
          
            $.ajax({
                method: 'GET',
                url: "{{ url('/get/semester/section/') }}",
                data: {
                    s_id: semester_id,
                },

                success: function(response) {
                    jQuery('#section_id').html(response);

                }
            });
        }

        function get_section_students(class_id) {
            $.ajax({
                method: 'GET',
                url: "{{ url('/get/section/students') }}",
                data: {
                    class_id: class_id,
                },

                success: function(response) {
                    jQuery('#student_selector_holder').html(response);
                }
            });
        }

        
    </script>
@endsection