@extends('layouts.app')

@section('content')
 
@include('validate')
<div class="row"> 
    <div class="col-md-12">

        <div class="card">
            <div class="card-body">

                <h4 class="card-title">{{ $supplier->supplier_name }}</h4>
                <p class="card-title-desc">{{ $supplier->mobile_no }}</p>

                <!-- Nav tabs -->
                <ul class="nav nav-tabs nav-tabs-custom nav-justified" role="tablist">
                    <li class="nav-item" role="presentation">
                        <a class="nav-link active" data-bs-toggle="tab" href="#overview" role="tab" aria-selected="false" tabindex="-1">
                            <span class="d-block d-sm-none"><i class="fas fa-home"></i></span>
                            <span class="d-none d-sm-block">Overview</span> 
                        </a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link" data-bs-toggle="tab" href="#bankaccounts" role="tab" aria-selected="false" tabindex="-1">
                            <span class="d-block d-sm-none"><i class="far fa-user"></i></span>
                            <span class="d-none d-sm-block">Bank Accounts</span> 
                        </a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link " data-bs-toggle="tab" href="#purchase" role="tab" aria-selected="true">
                            <span class="d-block d-sm-none"><i class="far fa-envelope"></i></span>
                            <span class="d-none d-sm-block">Purchase</span>   
                        </a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link" data-bs-toggle="tab" href="#payments" role="tab" aria-selected="false" tabindex="-1">
                            <span class="d-block d-sm-none"><i class="fas fa-cog"></i></span>
                            <span class="d-none d-sm-block">Payments</span>    
                        </a>
                    </li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content p-3 text-muted">
                    <div class="tab-pane active show" id="overview" role="tabpanel">
                         @include('suppliers.tabs.overview',['supplier'=>$supplier])
                    </div>
                    <div class="tab-pane" id="bankaccounts" role="tabpanel">
                        @include('suppliers.tabs.bankaccounts',['supplier'=>$supplier])
                    </div>
                    <div class="tab-pane" id="purchase" role="tabpanel">
                        @include('suppliers.tabs.purchase',['supplier'=>$supplier])
                    </div>
                    <div class="tab-pane" id="payments" role="tabpanel">
                        @include('suppliers.tabs.payments',['supplier'=>$supplier])
                    </div>
                </div>

            </div>
        </div>

    </div> 
</div>


@endsection

 
@push('scripts')

<script>

$(document).ready(function () {
        $('.statuschange').change(function () {
            var statusCheckbox = $(this);
            var status = statusCheckbox.prop('checked') ? 1 : 0;
            var id = statusCheckbox.attr('data-id'); // Assuming you have a data-id attribute for each checkbox

            $.ajax({
                type: 'POST',
                url: '{{ route('suppliers.bankaccounts.statusupdate') }}',
                data: {
                    _token: '{{ csrf_token() }}',
                    status: status,
                    id: id
                },
                success: function (data) {

                    location.reload(); 
                },
                error: function (data) {
                    console.log('Error updating status');
                }
            });
        });
    });

document.addEventListener('DOMContentLoaded', function () {
        const deleteButtons = document.querySelectorAll('.delete-record');

        deleteButtons.forEach(button => {
            button.addEventListener('click', function () {
                const recordId = this.getAttribute('data-id');
                var deleteUrl = "{{ route('suppliers.bankaccounts.destroy', ':id') }}";
                deleteUrl = deleteUrl.replace(':id', recordId); // Replace 'records.destroy' with your actual route name.

                Swal.fire({
                    title: 'Are you sure?',
                    text: 'You won\'t be able to revert this!',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, delete it!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        axios.delete(deleteUrl)
                            .then(response => {
                                Swal.fire('Deleted!', response.data.message, 'success');
                                // You can also remove the deleted record from the DOM here.
                                window.location.reload();
                            })
                            .catch(error => {
                                Swal.fire('Error!', 'An error occurred while deleting the record.', 'error');
                            });
                    }
                });
            });
        });
    });

</script>

@endpush