@extends('layouts.app')
@push('style')
    <style>
    
        .customer-card {
            border-radius: 1rem;
            background-color: #fff;
            transition: all 0.3s ease;
        }

        .customer-card:hover {
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        }

        /* Header Styles */
        .card-header h4 {
            font-weight: 600;
            color: #212529;
        }

        .card-header .btn {
            transition: all 0.2s ease;
        }

        .card-header .btn:hover {
            transform: scale(1.05);
        }

        /* Info Section */
        .info-section {
            background: #f8f9fa;
            border-radius: 0.75rem;
            padding: 1rem;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        }

        .section-title {
            font-size: 1rem;
            font-weight: 600;
            margin-bottom: 1rem;
            border-left: 4px solid #0d6efd;
            padding-left: 0.6rem;
            color: #343a40;
        }

        .info {
            font-size: 0.9rem;
            margin-bottom: 0.5rem;
            color: #495057;
            display: flex;
            justify-content: space-between;
            border-bottom: 1px dashed #dee2e6;
            padding-bottom: 4px;
        }

        .info span:first-child {
            color: #6c757d;
            font-weight: 500;
            flex-basis: 50%;
        }

        @media (max-width: 768px) {
            .info {
                flex-direction: column;
            }

            .info span:first-child {
                flex-basis: 100%;
                margin-bottom: 3px;
            }
        }

        /* Image Preview */
        img#previewImage {
            max-width: 100%;
            max-height: 120px;
            object-fit: contain;
            border-radius: 0.5rem;
            background-color: #fff;
            padding: 0.25rem;
            border: 1px solid #dee2e6;
        }
    </style>
@endpush
@push('middle_part')
    <form action="#" metdod="POST">
        @csrf
        <div class="datefilter mr-1">
            <div class="dropdown bootstrap-select">
                <select class="form-select form-control selectpicker" name="emp_id" aria-label="Default select example"
                    data-live-search="true">
                    <option value="">@lang('Select')</option>
                    @foreach ($customers as $customer)
                        <option {{ $item->id == $customer->id ? 'selected' : '' }} value="{{ $customer->id }}">
                            {{ $customer->company }}
                        </option>
                    @endforeach
                </select>
            </div>
            <button type="submit" class="btn btn-primary">Find customer</button>
        </div>
    </form>
@endpush

@section('content')
    @php
        $sa = customerAmount($item);
    @endphp

    <div class="page-wrapper">
        <div class="page-content">
            <div class="row tablerow">
                <div class="col-md-12">
                    @php
                        $page_name = 'customer > profile';
                        $page_number = 0;
                        $search = 0;
                    @endphp
                    @include('layouts.table_top')
                </div>

                <div class="container my-5">
                    <div class="customer-card shadow-sm rounded-4 bg-white">
                        <div class="card-header d-flex justify-content-between align-items-center border-bottom p-3">
                            <h4 class="mb-0">
                                <i class="bi bi-person-circle me-2 text-primary"></i> Customer Information
                            </h4>
                            <div>
                                <a href="{{ route('customer.edit', $item->id) }}"
                                    class="btn btn-outline-primary btn-sm me-2 btn_modal" type="button">
                                    <i class="bi bi-pencil-square"></i>
                                </a>
                                <button data-href="{{ route('customer.delete', [$item->id]) }}"
                                    class="btn btn-outline-danger btn-sm delete_button">
                                    <i class="bi bi-trash3"></i>
                                </button>
                            </div>
                        </div>

                        <div class="card-body p-4">
                            <div class="row g-4">

                                {{-- Column 1: Profile + Basic Info --}}
                                <div class="col-lg-3 col-md-6">
                                    <div class="info-section text-center">
                                        @if ($item->company_logo)
                                            <img src="{{ getImage('product', $item->company_logo) }}"
                                                class="img-fluid rounded mb-3 shadow-sm" style="max-height: 100px;"
                                                alt="Company Logo">
                                        @endif

                                        <h6 class="section-title">Basic Info</h6>
                                        <div class="info"><span>Customer Code:</span> {{ $item->customer_code }}</div>
                                        <div class="info"><span>Contact Name:</span> {{ $item->name }}</div>
                                        <div class="info"><span>Company:</span> {{ $item->company }}</div>
                                        <div class="info"><span>Mobile:</span> {{ $item->mobile }}</div>
                                        <div class="info"><span>Alt Mobile:</span> {{ $item->alternative_mobile }}</div>
                                        <div class="info"><span>Telephone:</span> {{ $item->telephone }}</div>
                                        <div class="info"><span>Email:</span> {{ $item->email }}</div>
                                        <div class="info"><span>Address:</span> {!! nl2br(e($item->addressdata)) !!}</div>
                                        <div class="info"><span>Opening Balance:</span> {{ $item->opening_balace }}</div>
                                        <div class="info"><span>Status:</span> <span
                                                class="badge bg-info text-dark">{{ $item->status }}</span></div>
                                    </div>
                                </div>

                                {{-- Column 2: Tax & Meta Info --}}
                                <div class="col-lg-3 col-md-6">
                                    <div class="info-section">
                                        <h6 class="section-title">Tax & Audit</h6>
                                        <div class="info"><span>GST No:</span> {{ $item->gst_number }}</div>
                                        <div class="info"><span>IGST No:</span> {{ $item->igt_number }}</div>
                                        <div class="info"><span>VAT No:</span> {{ $item->vat_Number }}</div>
                                        <div class="info"><span>License No:</span> {{ $item->license_number }}</div>
                                        <div class="info"><span>Tax No:</span> {{ $item->tax_No }}</div>
                                        <div class="info"><span>Created By:</span> {{ $item->created_user }}</div>
                                        <div class="info"><span>Created At:</span> {{ $item->created_date }}</div>
                                        <div class="info"><span>Updated By:</span> {{ $item->updated_user }}</div>
                                        <div class="info"><span>Updated At:</span> {{ $item->updated_date }}</div>
                                    </div>
                                </div>

                                {{-- Column 3: Sale Summary --}}
                                <div class="col-lg-3 col-md-6">
                                    <div class="info-section">
                                        <h6 class="section-title text-success">Sale Summary</h6>
                                        <div class="info"><span>Sub Amount:</span> {{ numberformat($sa['p_amount']) }}
                                        </div>
                                        <div class="info"><span>Discount:</span>
                                            {{ numberformat($sa['p_total_discount']) }}</div>
                                        <div class="info"><span>VAT:</span> {{ numberformat($sa['p_total_vat']) }}</div>
                                        <div class="info"><span>Shipping:</span>
                                            {{ numberformat($sa['p_shiping_charge']) }}</div>
                                        <div class="info"><span>Total:</span> {{ numberformat($sa['p_total_amount']) }}
                                        </div>
                                        <div class="info"><span>Gross Discount:</span>
                                            {{ numberformat($sa['p_gross_discount_amount']) }}</div>
                                        <div class="info"><span>Net Amount:</span> {{ numberformat($sa['p_nettotal']) }}
                                        </div>
                                        <div class="info"><span>Payment:</span> {{ numberformat($sa['pp_amount']) }}
                                        </div>
                                        <div class="info"><span>Due:</span> {{ numberformat($sa['p_due']) }}</div>
                                    </div>
                                </div>

                                {{-- Column 4: Sale Return --}}
                                <div class="col-lg-3 col-md-6">
                                    <div class="info-section">
                                        <h6 class="section-title text-danger">Sale Return</h6>
                                        <div class="info"><span>Sub Amount:</span> {{ numberformat($sa['pr_amount']) }}
                                        </div>
                                        <div class="info"><span>Discount:</span>
                                            {{ numberformat($sa['pr_total_discount']) }}</div>
                                        <div class="info"><span>VAT:</span> {{ numberformat($sa['pr_total_vat']) }}</div>
                                        <div class="info"><span>Shipping:</span>
                                            {{ numberformat($sa['pr_shiping_charge']) }}</div>
                                        <div class="info"><span>Total:</span> {{ numberformat($sa['pr_total_amount']) }}
                                        </div>
                                        <div class="info"><span>Gross Discount:</span>
                                            {{ numberformat($sa['pr_gross_discount_amount']) }}</div>
                                        <div class="info"><span>Net Amount:</span> {{ numberformat($sa['pr_nettotal']) }}
                                        </div>
                                        <div class="info"><span>Payment:</span> {{ numberformat($sa['prp_amount']) }}
                                        </div>
                                        <div class="info"><span>Due:</span> {{ numberformat($sa['pr_due']) }}</div>
                                    </div>
                                </div>

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

                <div class="col-md-12 mt-2">
                    <div class="employee-information">
                        <ul class="nav nav-pills" role="tablist">

                            <li class="nav-item">
                                <a class="nav-link active" id="pill-tab-1" data-bs-toggle="pill" href="#document"
                                    role="tab" aria-controls="document" aria-selected="false">Document</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="pill-tab-2" data-bs-toggle="pill" href="#account" role="tab"
                                    aria-controls="account" aria-selected="false">Bank Account</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="pill-tab-3" data-bs-toggle="pill" href="#purchase"
                                    role="tab" aria-controls="purchase" aria-selected="false">Sale</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="pill-tab-4" data-bs-toggle="pill" href="#purchase_return"
                                    role="tab" aria-controls="purchase_return" aria-selected="false">Sale
                                    Return</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="pill-tab-5" data-bs-toggle="pill" href="#payment_data"
                                    role="tab" aria-controls="payment_data" aria-selected="false">Sale Payment</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="pill-tab-5" data-bs-toggle="pill" href="#return_payment_data"
                                    role="tab" aria-controls="return_payment_data" aria-selected="false">Sale return
                                    Payment</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="pill-tab-6" data-bs-toggle="pill" href="#transection"
                                    role="tab" aria-controls="transection" aria-selected="false">Transection</a>
                            </li>

                        </ul>

                        <div class="tab-content py-3 mt-2">
                            <div class="tab-pane active" id="document" role="tabpanel" aria-labelledby="pill-tab-1">
                                @include('customers.profiles.document')
                            </div>
                            <div class="tab-pane" id="account" role="tabpanel" aria-labelledby="pill-tab-2">
                                @include('customers.accounts.account')
                            </div>
                            <div class="tab-pane" id="purchase" role="tabpanel" aria-labelledby="pill-tab-3">
                                @include('customers.profiles.sale')
                            </div>
                            <div class="tab-pane" id="purchase_return" role="tabpanel" aria-labelledby="pill-tab-4">
                                @include('customers.profiles.sale_return')
                            </div>
                            <div class="tab-pane" id="payment_data" role="tabpanel" aria-labelledby="pill-tab-5">
                                @include('customers.profiles.sale_payment')
                            </div>
                            <div class="tab-pane" id="return_payment_data" role="tabpanel" aria-labelledby="pill-tab-5">
                                @include('customers.profiles.sale_return_payment')
                            </div>
                            <div class="tab-pane" id="transection" role="tabpanel" aria-labelledby="pill-tab-6">
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection
@push('script')
    <script>
        $(document).ready(function() {

            $(document).on('click', 'button.document_delete', function() {
                Swal.fire({
                    title: 'Do you want to delete ?',
                    showDenyButton: false,
                    showCancelButton: true,
                    confirmButtonText: `Delete`,

                }).then((result) => {
                    /* Read more about isConfirmed, isDenied below */
                    if (result.isConfirmed) {
                        var href = $(this).data('href');
                        $.ajax({
                            method: 'get',
                            url: href,
                            success: function(result) {
                                if (result.success) {
                                    toastr.success(result.success);
                                    window.location.reload();
                                } else {
                                    toastr.error('Something went wrong');
                                }
                            },
                        });
                    }
                })
            });


            $(document).on("submit", "#ajax_form", function(e) {

                e.preventDefault();
                // Create a FormData object
                var formData = new FormData(this);
                // Use AJAX to send the form data
                $.ajax({
                    url: $(this).attr('action'),
                    type: "POST",
                    data: formData,
                    contentType: false, // Required for FormData
                    processData: false, // Required for FormData
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(data) {
                        if (data.errors) {
                            var errors = data.errors;
                            $.each(errors, function(field_name, error) {
                                $(document)
                                    .find("[name=" + field_name + "]")
                                    .after(
                                        '<span class="mb-1" style="color:red;font-size:12px !important;">' +
                                        error +
                                        "</span>");
                            });
                        } else if (data.success) {
                            toastr.success(data.success);
                            window.location.reload();
                        }
                    },
                    error: function(xhr) {
                        // Handle any errors returned by the server
                        if (xhr.responseJSON && xhr.responseJSON.errors) {
                            var errors = xhr.responseJSON.errors;
                            $.each(errors, function(field_name, error) {
                                $(document)
                                    .find("[name=" + field_name + "]")
                                    .after(
                                        '<span class="mb-1" style="color:red;font-size:12px !important;">' +
                                        error +
                                        "</span>");
                            });
                        } else {
                            toastr.error('An error occurred. Please try again.');
                        }
                    }
                });
            });


        })
    </script>
    <script>
        $(document).ready(function() {

            $('#sale_payment-table').on('click', '.pagination a', function(e) {
                e.preventDefault();
                const page = $(this).attr('href').split('page=')[1];
                sale_payment(page);
            });

            function sale_payment(page) {
                $('#sale_payment-table').empty();
                $('#loading-indicator').show();
                var page_number = $(".page_numbers option:selected").val();
                var customer_id = "{{ $item->id }}";
          
                $.ajax({
                    url: "{{ route('sale_payment.getdata') }}" + '?page=' + page,
                    type: 'get',
                    datatype: 'html',
                    data: {
                        perPage: page_number,
                        customer_id: customer_id,
                    },
                    success: function(data) {
                        $('#loading-indicator').hide();
                        $('#sale_payment-table').html(data);
                        console.log(data);
                    },
                    error: function() {
                        $('#loading-indicator').hide();
                    }
                });
            }
            sale_payment(1);
            $(".page_numbers").on("change", function() {
                sale_payment(1);
            })

        });
    </script>
@endpush