@extends('template.layouts.template-base')
@section('title', 'Product Management - Animal Type')

@section('styles')
<style>
  .page-content{
    background-color:#F0F4F8!important;
    padding: 80px 10px;
  }
</style>
@endsection

@section('content')
    <div class="page-header">
        <div class="container-fluid">
            <div class="row align-items-center">
                <div class="col">
                    <div class="page-title">
                        Product Management / <span class="breadcrumb-link">Animal Type</span>
                    </div>
                </div>
                <div class="col-auto cate-top-btns">
                    <div class=" action-buttons d-none"  id="bulkActions">
                    <button class="btn-delete-category " data-bs-toggle="modal" data-bs-target=".remove-category-screen">
                        Detele List  <i class="ri-delete-bin-4-fill fs-5"></i>
                    </button>
                    <button class="btn-export-category">
                        Export
                      <svg xmlns="http://www.w3.org/2000/svg"
                         width="16" height="16"
                         viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round">
                        <path d="M12 16V3"></path>
                        <polyline points="7 8 12 3 17 8"></polyline>
                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                        </svg>

                    </button>
                    </div>
                    <button class="btn-add-category" data-bs-toggle="offcanvas" data-bs-target="#addAnimalOffcanvas">
                        Add Animal Type  <i class="ri-add-fill fs-5"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="content-wrapper">
            <div class="filter-section">
                <button class="badge-total">Total Animal Type - {{ $animal_types_count }}</button>
                <div class="position-relative">
                    <div class="col-md-3 custom-dropdown">
                        <select id="statusFilter" class="dropdown-btn">
                            <option value="">All Status</option>
                            <option value="1">Active</option>
                            <option value="0">Inactive</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="card-body pt-3 pb-0">
               
                <div id="formSuccess" class="alert alert-success d-none"></div>
                <div id="editFormSuccess" class="alert alert-success d-none"></div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table id="animalTypesTable" class="table">
                        <thead>
                            <tr>
                                <th scope="col">S.No</th>
                                <th scope="col">Animal Type Name En</th>
                                <th scope="col">Animal Type Name Tamil</th>
                                <th scope="col">No of Products</th>
                                <th scope="col">Status</th>
                                <th scope="col">Action</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Add Animal Type Offcanvas -->
    <div class="offcanvas offcanvas-end" tabindex="-1" id="addAnimalOffcanvas" style="width: 500px;">
        <button type="button" class="offcanvas-left-close"  data-bs-dismiss="offcanvas" aria-label="Close">✕</button>
        <div class="offcanvas-header">
            <h5 class="offcanvas-title">Add Animal Type</h5>
        </div>
        <div class="offcanvas-body">
           <form id="addAnimalTypeForm" method="POST" action="{{ route('backend.animal-types.store') }}" enctype="multipart/form-data">
                @csrf
                <div id="formErrors" class="alert alert-danger d-none"></div>
                <div class="row mb-3">
                    <div class="col-md-12">
                        <label class="form-label">Animal Type Name English<span class="text-danger">*</span></label>
                        <input type="text" class="form-control" name="name_en" id="name_en" placeholder="Enter animal Type name english">
                    </div>
                    <div class="col-md-12">
                        <label class="form-label">Animal Type Name Tamil</label>
                        <input type="text" class="form-control" name="name_tamil" id="name_tamil" placeholder="Enter animal type name tamil">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Animal Type Status <span class="text-danger">*</span></label>
                        <div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="status" id="addStatusActive" value="1" checked>
                                <label class="form-check-label" for="addStatusActive">Active</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="status" id="addStatusInactive" value="0">
                                <label class="form-check-label" for="addStatusInactive">Inactive</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="d-flex justify-content-end gap-4  offcan-btn">
                    <button type="button" class="btn cancel-btn" data-bs-dismiss="offcanvas">Cancel</button>
                    <button type="submit" class="btn delete-btn show-toast">Save</button>
                </div>
            </form>
        </div>
    </div>
    
    <!-- View Animal Type Offcanvas -->
    <div class="offcanvas offcanvas-end" tabindex="-1" id="viewAnimalTypeOffcanvas" style="width: 500px;">
        <button type="button" class="offcanvas-left-close" data-bs-dismiss="offcanvas" aria-label="Close">
                ✕ </button>
        <div class="offcanvas-header">
            <h5 class="offcanvas-title">View Animal Type</h5>
        </div>
        <div class="offcanvas-body">
            <form id="viewAnimalTypeForm">
                <div class="row mb-3">
                    <div class="col-md-12">
                        <label class="form-label">Animal Type Name English</label>
                        <p id="view_name_en"></p>
                    </div>
                    <div class="col-md-12">
                        <label class="form-label">Animal Type Name Tamil</label>
                        <p id="view_name_tamil"></p>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Animal Type Status</label>
                        <p id="view_status"></p>
                    </div>
                </div>
            </form>
        </div>
    </div>
    
    <!-- Edit Animal Type Offcanvas -->
    <div class="offcanvas offcanvas-end" tabindex="-1" id="editAnimalTypeOffcanvas" style="width: 500px;">
        <button type="button" class="offcanvas-left-close" data-bs-dismiss="offcanvas" aria-label="Close">✕</button>
        <div class="offcanvas-header">
            <h5 class="offcanvas-title">Edit Animal Type</h5>

        </div>
        <div class="offcanvas-body">
            <form id="editAnimalTypeForm" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <div id="editFormErrors" class="alert alert-danger d-none"></div>
            
                <div class="row mb-3">
                    <div class="col-md-12">
                        <label class="form-label">Animal Type Name English<span class="text-danger">*</span></label>
                        <input type="text" class="form-control" name="name_en" id="edit_name_en" placeholder="Enter name english" value="">
                    </div>
                    <div class="col-md-12">
                        <label class="form-label">Animal Type Name Tamil</label>
                        <input type="text" class="form-control" name="name_tamil" id="edit_name_tamil" placeholder="Enter name tamil" value="">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Animal Type Status <span class="text-danger">*</span></label>
                        <div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="status" id="editStatusActive" value="1" checked>
                                <label class="form-check-label" for="editStatusActive">Active</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="status" id="editStatusInactive" value="0">
                                <label class="form-check-label" for="editStatusInactive">Inactive</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="d-flex justify-content-end gap-4 offcan-btn-1">
                    <button type="button" class="btn cancel-btn" data-bs-dismiss="offcanvas">Cancel</button>
                    <button type="submit" class="btn delete-btn show-toast">Update</button>
                </div>
            </form>
        </div>
    </div>

    @include('template.layouts.confirm-delete-modal')

@endsection
@section('scripts')
<script src="{{ asset('assets/auth/js/jquery-ui.js') }}"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#addAnimalTypeForm').on('submit', function (e){
            e.preventDefault();

            let formData = new FormData(this);

            $.ajax({
                url: $(this).attr('action'),
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,

                success: function (response) {

                    $('#formErrors').addClass('d-none').html('');

                    $('#formSuccess')
                        .removeClass('d-none')
                        .html(response.message);

                    // reload datatable
                    $('#animalTypesTable').DataTable().ajax.reload(null, false);

                    // reset form
                    $('#addAnimalTypeForm')[0].reset();

                    $('#addAnimalOffcanvas').offcanvas('hide');

                    // ✅ scroll to success message
                    $('html, body').animate({
                        scrollTop: $('#formSuccess').offset().top - 100
                    }, 500);

                    setTimeout(() => {
                        $('#pageSuccess').addClass('d-none');
                    }, 500);
                    
                },
                error: function (xhr) {

                    $('#formErrors').removeClass('d-none').html('');

                    if (xhr.status === 422) {
                        $.each(xhr.responseJSON.errors, function (key, value) {
                            $('#formErrors').append('<p>' + value[0] + '</p>');
                        });
                    } else {
                        $('#formErrors').html('Something went wrong. Please try again.');
                    }

                    // ⬆️ scroll to error inside form
                    $('.offcanvas-body').animate({
                        scrollTop: 0
                    }, 300);
                }
            });
        });
    });

    $(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        
        $('#statusFilter').on('change', function () {
            table.ajax.reload();
        });

        var table = $('#animalTypesTable').DataTable({
            processing: true,
            ordering: false,
            searching: true,
            serverSide: true,
            responsive: true,
            pageLength: 10,
            language: {
                paginate: {
                    next: '{{__('Next')}}',
                    previous: '{{__('Previous')}}'
                }
            },
            ajax: {
                url: "{{ route('backend.animal-types.index') }}",
                data: function(d) {
                    d.name_en      = $('#name_en').val(),
                    d.name_tamil   = $('#name_tamil').val(),
                    d.status       = $('#statusFilter').val();
                    d.search = $('input[type="search"]').val()
                }
            },
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex'
                },
                {
                    data: 'name_en',
                    name: 'name_en'
                },
                {
                    data: 'name_tamil',
                    name: 'name_tamil'
                },
                {
                    data: 'products_count',
                    name: 'products_count'
                },
                {
                    data: 'status',
                    name: 'status'
                },
                {
                    data: 'action',
                    name: 'action'
                },
            ],
        });
        $('input[type="search"]').keyup(function(e) {
            countByFilter();
            table.draw();
            e.preventDefault();
        });
        $("#applyFilter").click(function(e) {
            table.draw();
            e.preventDefault();
        });
       

    });

    $("#resetFilter").click(function() {
        $(".filter").val('');
        $('#animalTypesTable').DataTable().ajax.reload();
        countByFilter();
    });
    
    $(document).on('click', '.view-animal-type', function (e) {
        e.preventDefault();

        let url = $(this).data('url');

        $.get(url, function (data) {

            // Text values
            $('#view_name_en').text(data.name_en ?? '-');
            $('#view_name_tamil').text(data.name_tamil ?? '-');

            // Status
            $('#view_status').text(
                data.status == 1 ? 'Active' : 'Inactive'
            );
            
            // Show offcanvas
            let offcanvas = new bootstrap.Offcanvas('#viewAnimalTypeOffcanvas');
            offcanvas.show();
        });
    });

    $(document).on('click', '.edit-animal-type', function (e) {
        e.preventDefault();

        let editUrl   = $(this).data('url');
        let updateUrl = $(this).data('update-url');
        $('#editAnimalTypeForm').attr('action', updateUrl);
       
        $.get(editUrl, function (data) {
           
            // Text values
            $('#edit_name_en').val(data.name_en);
            $('#edit_name_tamil').val(data.name_tamil);

            // Status
            if (data.status == 1) {
                $('#editStatusActive').prop('checked', true);
            } else {
                $('#editStatusInactive').prop('checked', true);
            }

            // Show offcanvas
            let offcanvas = new bootstrap.Offcanvas('#editAnimalTypeOffcanvas');
            offcanvas.show();
        });
    });

    $(document).ready(function () {
        $('#editAnimalTypeForm').on('submit', function (e){
            e.preventDefault();

            let formData = new FormData(this);

            $.ajax({
                url: $(this).attr('action'),
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,

                success: function (response) {

                    $('#editFormErrors').addClass('d-none').html('');

                    $('#editFormSuccess')
                        .removeClass('d-none')
                        .html(response.message);

                    // reload datatable
                    $('#animalTypesTable').DataTable().ajax.reload(null, false);

                    // reset form
                    $('#editAnimalTypeForm')[0].reset();

                    $('#editAnimalTypeOffcanvas').offcanvas('hide');

                    //scroll to success message
                    $('html, body').animate({
                        scrollTop: $('#editFormSuccess').offset().top - 100
                    }, 500);

                    setTimeout(() => {
                        $('#pageSuccess').addClass('d-none');
                    }, 500);
                    
                },
                error: function (xhr) {

                    $('#editFormErrors').removeClass('d-none').html('');

                    if (xhr.status === 422) {
                        $.each(xhr.responseJSON.errors, function (key, value) {
                            $('#editFormErrors').append('<p>' + value[0] + '</p>');
                        });
                    } else {
                        $('#editFormErrors').html('Something went wrong. Please try again.');
                    }

                    //scroll to error inside form
                    $('.offcanvas-body').animate({
                        scrollTop: 0
                    }, 300);
                }
            });
        });
    });

    $(document).ready(function () {
        initDeleteHandler();
    });

</script>
@endsection