@extends('admin.master')
@section('title', 'Customer List')
@section('content')

<style>
    .custom-pagination-wrapper {
        text-align: center;
        margin-top: 25px;
        margin-bottom: 15px;
    }
    .custom-pagination-wrapper .pagination {
        display: inline-flex;
        margin: 0;
        padding: 0;
        box-shadow: none;
    }
    .custom-pagination-wrapper .pagination > li > a,
    .custom-pagination-wrapper .pagination > li > span {
        border: none !important; 
        color: #54667a;
        padding: 8px 16px;
        font-size: 14px;
        margin: 0 4px;
        border-radius: 5px !important;
        background: transparent;
        transition: 0.3s;
        font-weight: 500;
    }
    .custom-pagination-wrapper .pagination > li > a:hover {
        background-color: #f2f7f8;
        color: #03a9f3;
    }
    .custom-pagination-wrapper .pagination > .active > span,
    .custom-pagination-wrapper .pagination > .active > span:hover {
        background-color: #03a9f3 !important; 
        color: #fff !important;
        box-shadow: 0 2px 5px rgba(3, 169, 243, 0.3);
    }
    .custom-pagination-wrapper .pagination > .disabled > span {
        color: #cccccc;
        background: transparent;
    }
    .data-info-text {
        color: #797979; 
        font-size: 13px; 
        margin-bottom: 10px;
    }
</style>

<div class="container-fluid">
    <div class="row bg-title">
        <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
           <ol class="breadcrumb">
                <li class="active breadcrumbColor"><a href="{{ url('dashboard') }}"><i class="fa fa-home"></i> Dashboard</a></li>
                <li>@yield('title')</li>
            </ol>
        </div>
        <div class="col-lg-9 col-sm-8 col-md-8 col-xs-12">
            <a href="{{ route('customer.create') }}" class="btn btn-success pull-right m-l-20 waves-effect waves-light"> 
                <i class="fa fa-plus-circle" aria-hidden="true"></i> Add New
            </a>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12">
            <div class="panel panel-info">
                <div class="panel-heading"><i class="mdi mdi-table fa-fw"></i> @yield('title')</div>
                <div class="panel-wrapper collapse in" aria-expanded="true">
                    <div class="panel-body">
                        
                        @if(session()->has('success'))
                            <div class="alert alert-success alert-dismissable">
                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                <i class="cr-icon glyphicon glyphicon-ok"></i>&nbsp;<strong>{{ session()->get('success') }}</strong>
                            </div>
                        @endif
                        
                        <div class="table-responsive" style="overflow-x: auto; padding-bottom: 10px;">
                            <table id="customerTable" class="table table-bordered">
                                <thead>
                                     <tr class="tr_header">
                                        <th>S/L</th>
                                        <th>Name</th>
                                        <th>Mobile</th>
                                        <th>Address</th>
                                        <th>Customer Type</th>
                                        <th>Op. Balance</th>
                                        <th>Limit</th>
                                        <th>Due</th>
                                        <th style="text-align: center;">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php $sl = ($data->currentPage() - 1) * $data->perPage(); @endphp

                                    @foreach($data AS $value)
                                        @php
                                            $opening           = (float)($value->previous_due ?? 0);
                                            $sales             = (float)($value->total_sales ?? 0);
                                            $purchases         = (float)($value->total_purchases ?? 0); 
                                            $payment           = (float)($value->total_collections ?? 0);
                                            
                                            // Fetching purchase payments (amount paid to supplier)
                                            $purchase_payments = (float)($value->total_purchase_payments ?? 0);
                                            
                                            // New balance calculation formula
                                            $balance = ($opening + $sales + $purchase_payments) - ($payment + $purchases);
                                            
                                            $limit = (float)($value->credit_amount_limit ?? 0);
                                            $isOverLimit = ($limit > 0 && $balance > $limit);
                                        @endphp
                                        
                                        <tr style="{{ $isOverLimit ? 'background-color: #fff0f0;' : '' }}">
                                            <td style="width: 50px;">{!! ++$sl !!}</td>
                                            <td>
                                                {!! $value->name !!}
                                                @if($isOverLimit)
                                                    <i class="fa fa-exclamation-triangle text-danger pull-right" title="Credit Limit Exceeded!"></i>
                                                @endif
                                            </td>
                                            <td>{!! $value->mobile !!}</td>
                                            <td>{!! $value->address !!}</td>
                                            
                                            <td>
                                                @if($value->customer_type)
                                                    <span class="label label-info">{!! $value->customer_type !!}</span>
                                                @else
                                                    <span class="label label-default">Regular</span>
                                                @endif
                                            </td>

                                            <td>{!! number_format($opening, 2) !!}</td>

                                            <td>{!! number_format($limit, 2) !!}</td>

                                            <td>
                                                <strong class="{{ $balance > 0 ? 'text-danger' : 'text-success' }}">
                                                    {!! number_format($balance, 2) !!}
                                                </strong>
                                            </td>

                                            <td style="width: 100px; text-align: center;">
                                                @if($value->id != 1)
                                                    <a href="{!! route('customer.edit',$value->id) !!}" class="btn btn-success btn-xs btnColor" title="Edit">
                                                        <i class="fa fa-pencil-square-o"></i>
                                                    </a>
                                                    
                                                    <a href="javascript:void(0)" data-id="{!! $value->id!!}" class="delete btn btn-danger btn-xs deleteBtn btnColor" title="Delete">
                                                        <i class="fa fa-trash-o"></i>
                                                    </a>
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div> 

                        <div class="row">
                            <div class="col-md-12">
                                <div class="custom-pagination-wrapper">
                                    <div class="data-info-text">
                                        Showing {{ $data->firstItem() }} to {{ $data->lastItem() }} of {{ $data->total() }} entries
                                    </div>
                                    <div>
                                        {!! $data->links() !!}
                                    </div>
                                </div>
                            </div>
                        </div>

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

<script>
    $(document).ready(function() {
        $('#customerTable').DataTable({
            "destroy": true,  
            "paging": false,  
            "info": false,    
            "ordering": true,
            "searching": true
        });
    });
</script>

@endsection