@extends('layouts.admin')
@section('content')
    <div class="card card-primary">
        <div class="card-header">
            <h4>Edit Board</h4>
        </div>

        <div class="card-body">
            @if (session()->has('message'))
                <p class="alert alert-info">
                    {{ session()->get('message') }}
                </p>
            @endif

            @if (session('error'))
                <div class="alert alert-danger">
                    {{ session('error') }}
                </div>
            @endif

        </div>

        <div style="width: 80%; margin:0 auto;" class="card card-primary">

            <div class="card-body">
                <form id="boardEditForm">
                    @csrf
                    <div class="mb-3">
                        <div class="form-group">
                            <label for="board_name_bn" class="form-label required">Board name bn</label>
                            <input name="board_name_bn" value="{{ $boards->board_name_bn }}" required="true" type="text"
                                class="form-control">
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="form-group">
                            <label for="board_name_en" class="form-label required">Board name en</label>
                            <input name="board_name_en" value="{{ $boards->board_name_en }}" required="true" type="text"
                                class="form-control">
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-6">
                            <div class="mb-3">
                                <div class="form-group">
                                    <label for="board_code" class="form-label required">Board Code</label>
                                    <input name="board_code" value="{{ $boards->board_code }}" required="true" type="text"
                                        class="form-control">
                                </div>
                            </div>
                        </div>

                        <div class="col-6">
                            <div class="mb-3">
                                <div class="form-group">
                                    <label for="board_short_name" class="form-label required">Board Short Name</label>
                                    <input name="board_short_name" value="{{ $boards->board_short_name }}" required="true"
                                        type="text" class="form-control">
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="mb-3">
                        <div class="form-group">
                            <label for="logo" class="form-label">Board Logo</label>
                            <input name="logo" type="file" class="form-control">
                        </div>
                    </div>

                    <div class="mb-3">
                        <div class="form-group">
                            <label for="institute_categories_id">Select Institute Category</label>
                            <select class="form-control select2 " name="institute_categories_id[]" id="institute_categories"
                                multiple>

                            </select>

                        </div>
                    </div>

                    <div class="mb-3">
                        <div class="form-group">
                            <label for="district_id">Select Institute District</label>
                            <select class="form-control select2" name="district_id[]" id="district_id" multiple>
                            </select>

                        </div>
                    </div>

                    <div class="row">
                        <div class="col-6">
                            <div class="mb-3">
                                <div class="form-group">
                                    <label class="" for="rec_status">Status</label>
                                    <select class="form-control" name="rec_status" id="rec_status">
                                        <option value="1" {{ $boards->rec_status == 1 ? 'selected' : '' }}>Active</option>
                                        <option value="0" {{ $boards->rec_status == 0 ? 'selected' : '' }}>Inactive</option>
                                    </select>
                                </div>
                            </div>

                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label for="sort_order" class="form-label">Sort Order</label>
                                <input name="sort_order" type="number" value="{{$boards->sort_order}}" class="form-control" id="sort_order">
                            </div>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary mt-2">Update</button>
                </form>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script>
        window.apiUrl = "{{ config('app.master_base_url') }}";
        $(document).ready(function() {
            // $.ajax({
            //     url: apiUrl + '/district',
            //     type: 'GET',
            //     success: function(response) {
            //         var dataList = response.data
            //         var districtDropdown = $('#district_id');
            //         $.each(dataList, function(index, district) {
            //             districtDropdown.append($('<option>', {
            //                 value: district.uid,
            //                 text: district.district_name_bn
            //             }));
            //         });

            //     },
            //     error: function(xhr, status, error) {
            //         console.error('Error fetching district data:', error);
            //     }
            // });

            // $.ajax({
            //     url: apiUrl + '/institutes-categories',
            //     type: 'GET',
            //     success: function(response) {
            //         var categotyDropdown = $('#institute_categories');
            //         $.each(response.data, function(index, category) {
            //             categotyDropdown.append($('<option>', {
            //                 value: category.uid,
            //                 text: category.title_bn
            //             }));
            //         });

            //     },
            //     error: function(xhr, status, error) {
            //         console.error('Error fetching district data:', error);
            //     }
            // });

            //boardInstituteCategoryForm submit 
            $('#boardEditForm').submit(function(e) {
                e.preventDefault();
                var formData = $(this).serialize();
                $.ajax({
                    url: apiUrl + '/board-to-institutes-categories',
                    type: 'POST',
                    data: formData,
                    success: function(response) {
                        console.log(response);
                        setTimeout(() => {
                            window.location.href = "{{ route('admin.boards.index') }}";
                        }, 1000)
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr.responseText);
                        alert('An error while saving the data. Please try again later.');
                    }
                });
            });



        });
    </script>
@endsection