@include('admin.layouts.header')
@include('admin.layouts.sidebar')

@php
    $isEdit  = isset($partner);
    $action  = $isEdit ? '/admin/da-system/partners/' . $partner->id . '/update' : '/admin/da-system/partners';
    $title   = $isEdit ? 'Edit Partner' : 'Add Partner';
@endphp

<div class="m-grid__item m-grid__item--fluid m-wrapper">
    <div class="m-subheader">
        <div class="d-flex align-items-center">
            <div class="mr-auto">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    DA System &rsaquo; <a href="/admin/da-system/partners">Partners</a> &rsaquo; {{ $title }}
                </h3>
            </div>
        </div>
    </div>

    <div class="m-content">
        @if($errors->any())
            <div class="alert alert-danger alert-dismissible fade show">
                <button type="button" class="close" data-dismiss="alert"></button>
                <ul class="mb-0">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ $action }}" method="POST" id="partner-form">
            {{ csrf_field() }}

            {{-- ── Basic Info ─────────────────────────────────────────────────── --}}
            <div class="m-portlet m-portlet--mobile">
                <div class="m-portlet__head">
                    <div class="m-portlet__head-caption">
                        <div class="m-portlet__head-title">
                            <span class="m-portlet__head-icon"><i class="fa fa-user-o"></i></span>
                            <h3 class="m-portlet__head-text">Basic Information</h3>
                        </div>
                    </div>
                </div>
                <div class="m-portlet__body">
                    <div class="row">
                        <div class="col-md-4 form-group">
                            <label>Name <span class="text-danger">*</span></label>
                            <input type="text" name="name" class="form-control"
                                   value="{{ old('name', $partner->name ?? '') }}" required>
                        </div>
                        <div class="col-md-4 form-group">
                            <label>Company Type</label>
                            <select name="company_type" class="form-control">
                                <option value="">— Select —</option>
                                @foreach(['Individual', 'Company', 'Partnership', 'LLP', 'Trust', 'Other'] as $type)
                                    <option value="{{ $type }}" {{ old('company_type', $partner->company_type ?? '') == $type ? 'selected' : '' }}>
                                        {{ $type }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4 form-group">
                            <label>Sub Partner ID</label>
                            <select name="sub_partner_id" class="form-control">
                                <option value="">— Select —</option>
                                @foreach($partnersList as $id => $name)
                                    <option value="{{ $id }}" {{ old('sub_partner_id', $partner->sub_partner_id ?? '') == $id ? 'selected' : '' }}>
                                        {{ $name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4 form-group">
                            <label>UCIC</label>
                            <input type="text" name="ucic" class="form-control"
                                   value="{{ old('ucic', $partner->ucic ?? '') }}">
                        </div>
                        <div class="col-md-4 form-group">
                            <label>Reference</label>
                            <input type="text" name="reference" class="form-control"
                                   value="{{ old('reference', $partner->reference ?? '') }}">
                        </div>
                        <div class="col-md-4 form-group">
                            <label>Company</label>
                            <input type="text" name="company" class="form-control"
                                   value="{{ old('company', $partner->company ?? '') }}">
                        </div>
                    </div>
                </div>
            </div>

            {{-- ── Tax & Compliance ────────────────────────────────────────────── --}}
            <div class="m-portlet m-portlet--mobile">
                <div class="m-portlet__head">
                    <div class="m-portlet__head-caption">
                        <div class="m-portlet__head-title">
                            <span class="m-portlet__head-icon"><i class="fa fa-file-text-o"></i></span>
                            <h3 class="m-portlet__head-text">Tax &amp; Compliance</h3>
                        </div>
                    </div>
                </div>
                <div class="m-portlet__body">
                    <div class="row">
                        <div class="col-md-4 form-group">
                            <label>TAN</label>
                            <input type="text" name="tan" class="form-control"
                                   value="{{ old('tan', $partner->tan ?? '') }}">
                        </div>
                        <div class="col-md-4 form-group">
                            <label>PAN</label>
                            <input type="text" name="pan" class="form-control"
                                   value="{{ old('pan', $partner->pan ?? '') }}" maxlength="10">
                        </div>
                        <div class="col-md-4 form-group">
                            <label>GSTN</label>
                            <input type="text" name="gstn" class="form-control"
                                   value="{{ old('gstn', $partner->gstn ?? '') }}" maxlength="15">
                        </div>
                        <div class="col-md-12 form-group">
                            <label>GST Address</label>
                            <textarea name="gst_address" class="form-control" rows="2">{{ old('gst_address', $partner->gst_address ?? '') }}</textarea>
                        </div>
                        <div class="col-md-4 form-group">
                            <label>Fiscal Position</label>
                            <input type="text" name="fiscal_position" class="form-control"
                                   value="{{ old('fiscal_position', $partner->fiscal_position ?? '') }}">
                        </div>
                        <div class="col-md-4 form-group">
                            <label>Barcode</label>
                            <input type="text" name="barcode" class="form-control"
                                   value="{{ old('barcode', $partner->barcode ?? '') }}">
                        </div>
                        <div class="col-md-4 form-group">
                            <label>Format</label>
                            <input type="text" name="format" class="form-control"
                                   value="{{ old('format', $partner->format ?? '') }}">
                        </div>
                    </div>
                </div>
            </div>

            {{-- ── Contact & Location ──────────────────────────────────────────── --}}
            <div class="m-portlet m-portlet--mobile">
                <div class="m-portlet__head">
                    <div class="m-portlet__head-caption">
                        <div class="m-portlet__head-title">
                            <span class="m-portlet__head-icon"><i class="fa fa-map-marker"></i></span>
                            <h3 class="m-portlet__head-text">Contact &amp; Location</h3>
                        </div>
                    </div>
                </div>
                <div class="m-portlet__body">
                    <div class="row">
                        <div class="col-md-4 form-group">
                            <label>Mobile</label>
                            <input type="text" name="mobile" class="form-control"
                                   value="{{ old('mobile', $partner->mobile ?? '') }}" maxlength="20">
                        </div>
                        <div class="col-md-4 form-group">
                            <label>Email</label>
                            <input type="email" name="email" class="form-control"
                                   value="{{ old('email', $partner->email ?? '') }}">
                        </div>
                        <div class="col-md-4 form-group">
                            <label>Website</label>
                            <input type="text" name="website" class="form-control"
                                   value="{{ old('website', $partner->website ?? '') }}">
                        </div>
                        <div class="col-md-4 form-group">
                            <label>City</label>
                            <input type="text" name="city" class="form-control"
                                   value="{{ old('city', $partner->city ?? '') }}">
                        </div>
                        <div class="col-md-4 form-group">
                            <label>State</label>
                            <input type="text" name="state" class="form-control"
                                   value="{{ old('state', $partner->state ?? '') }}">
                        </div>
                        <div class="col-md-4 form-group">
                            <label>Zip / Pincode</label>
                            <input type="text" name="zip" class="form-control"
                                   value="{{ old('zip', $partner->zip ?? '') }}" maxlength="10">
                        </div>
                    </div>
                </div>
            </div>

            {{-- ── Product & Business ──────────────────────────────────────────── --}}
            <div class="m-portlet m-portlet--mobile">
                <div class="m-portlet__head">
                    <div class="m-portlet__head-caption">
                        <div class="m-portlet__head-title">
                            <span class="m-portlet__head-icon"><i class="fa fa-briefcase"></i></span>
                            <h3 class="m-portlet__head-text">Product &amp; Business</h3>
                        </div>
                    </div>
                </div>
                <div class="m-portlet__body">
                    <div class="row">
                        <div class="col-md-4 form-group">
                            <label>Product</label>
                            <input type="text" name="product" class="form-control"
                                   value="{{ old('product', $partner->product ?? '') }}">
                        </div>
                        <div class="col-md-4 form-group">
                            <label>Sub Product</label>
                            <input type="text" name="sub_product" class="form-control"
                                   value="{{ old('sub_product', $partner->sub_product ?? '') }}">
                        </div>
                        <div class="col-md-4 form-group">
                            <label>Source</label>
                            <input type="text" name="source" class="form-control"
                                   value="{{ old('source', $partner->source ?? '') }}">
                        </div>
                        <div class="col-md-4 form-group">
                            <label>Industry</label>
                            <input type="text" name="industry" class="form-control"
                                   value="{{ old('industry', $partner->industry ?? '') }}">
                        </div>
                        <div class="col-md-4 form-group">
                            <label>Tags</label>
                            <input type="text" name="tags" class="form-control"
                                   value="{{ old('tags', $partner->tags ?? '') }}"
                                   placeholder="Comma separated">
                        </div>
                        <div class="col-md-4 form-group">
                            <label>Pricelist</label>
                            <input type="text" name="pricelist" class="form-control"
                                   value="{{ old('pricelist', $partner->pricelist ?? '') }}">
                        </div>
                    </div>
                </div>
            </div>

            {{-- ── Sales ───────────────────────────────────────────────────────── --}}
            <div class="m-portlet m-portlet--mobile">
                <div class="m-portlet__head">
                    <div class="m-portlet__head-caption">
                        <div class="m-portlet__head-title">
                            <span class="m-portlet__head-icon"><i class="fa fa-bar-chart"></i></span>
                            <h3 class="m-portlet__head-text">Sales</h3>
                        </div>
                    </div>
                </div>
                <div class="m-portlet__body">
                    <div class="row">
                        <div class="col-md-4 form-group">
                            <label>Salesperson</label>
                            <input type="text" name="salesperson" class="form-control"
                                   value="{{ old('salesperson', $partner->salesperson ?? '') }}">
                        </div>
                        <div class="col-md-4 form-group">
                            <label>Sales Team</label>
                            <input type="text" name="sales_team" class="form-control"
                                   value="{{ old('sales_team', $partner->sales_team ?? '') }}">
                        </div>
                        <div class="col-md-4 form-group">
                            <label>Customer Payment Terms</label>
                            <input type="text" name="customer_payment_terms" class="form-control"
                                   value="{{ old('customer_payment_terms', $partner->customer_payment_terms ?? '') }}">
                        </div>
                    </div>
                </div>
            </div>

            {{-- ── Bank Details ────────────────────────────────────────────────── --}}
            <style>
                .bank-title-btn .transition-icon {
                    transition: transform 0.2s ease-in-out;
                }
                .bank-title-btn[aria-expanded="true"] .transition-icon {
                    transform: rotate(90deg);
                }
                .bank-card {
                    border: 1px solid #ebedf2;
                    border-radius: 4px;
                }
            </style>

            <template id="bank-card-template">
                <div class="card bank-card mb-3" data-index="__INDEX__">
                    <div class="card-header" id="heading-__INDEX__" style="padding: 10px 15px; display: flex; justify-content: space-between; align-items: center; background-color: #f7f8fa; border-bottom: 1px solid #ebedf2;">
                        <h5 class="mb-0" style="margin: 0;">
                            <button class="btn btn-link bank-title-btn text-left collapsed" type="button" data-toggle="collapse" data-target="#collapse-__INDEX__" aria-expanded="false" aria-controls="collapse-__INDEX__" style="color: #575962; font-weight: 500; text-decoration: none; padding: 0;">
                                <i class="fa fa-chevron-right mr-2 transition-icon"></i>
                                <span class="bank-name-title">Bank Details</span>
                            </button>
                        </h5>
                        <div>
                            <button type="button" class="btn btn-danger btn-sm m-btn m-btn--icon remove-bank-btn">
                                <span><i class="fa fa-trash-o"></i><span>Remove</span></span>
                            </button>
                        </div>
                    </div>

                    <div id="collapse-__INDEX__" class="collapse" aria-labelledby="heading-__INDEX__" data-parent="#bank-accordion">
                        <div class="card-body" style="padding: 20px;">
                            <div class="row">
                                <div class="col-md-4 form-group">
                                    <label>Bank Name</label>
                                    <input type="text" name="banks[__INDEX__][bank_name]" class="form-control bank-name-input" value="">
                                </div>
                                <div class="col-md-4 form-group">
                                    <label>Account Holder Name</label>
                                    <input type="text" name="banks[__INDEX__][bank_account_holder_name]" class="form-control" value="">
                                </div>
                                <div class="col-md-4 form-group">
                                    <label>Account Number</label>
                                    <input type="text" name="banks[__INDEX__][bank_account_number]" class="form-control" value="">
                                </div>
                                <div class="col-md-4 form-group">
                                    <label>Bank Identifier Code (IFSC / BIC)</label>
                                    <input type="text" name="banks[__INDEX__][bank_identifier_code]" class="form-control" value="" maxlength="20">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </template>

            <div class="m-portlet m-portlet--mobile" id="bank-details-portlet">
                <div class="m-portlet__head">
                    <div class="m-portlet__head-caption">
                        <div class="m-portlet__head-title">
                            <span class="m-portlet__head-icon"><i class="fa fa-university"></i></span>
                            <h3 class="m-portlet__head-text">Bank Details</h3>
                        </div>
                    </div>
                    <div class="m-portlet__head-tools">
                        <button type="button" class="btn btn-primary btn-sm m-btn m-btn--icon m-btn--air" id="add-bank-btn">
                            <span><i class="fa fa-plus"></i><span>Add Bank</span></span>
                        </button>
                    </div>
                </div>
                <div class="m-portlet__body" style="padding: 20px;">
                    <div class="accordion" id="bank-accordion">
                        @php
                            $banks = old('banks', isset($partner) ? $partner->banks : []);
                            if (!is_array($banks) && !is_a($banks, 'Illuminate\Support\Collection')) {
                                $banks = [];
                            }
                            if (empty($banks) || count($banks) === 0) {
                                $banks = [[]]; // Default to one empty bank form
                            }
                        @endphp
                        @foreach($banks as $index => $bank)
                            @php
                                $bankName = is_object($bank) ? $bank->bank_name : ($bank['bank_name'] ?? '');
                                $accountHolder = is_object($bank) ? $bank->bank_account_holder_name : ($bank['bank_account_holder_name'] ?? '');
                                $accountNumber = is_object($bank) ? $bank->bank_account_number : ($bank['bank_account_number'] ?? '');
                                $ifsc = is_object($bank) ? $bank->bank_identifier_code : ($bank['bank_identifier_code'] ?? '');
                                $bankId = is_object($bank) ? $bank->id : ($bank['id'] ?? null);
                                
                                // Expand the first one, or if there's only one bank
                                $isOpen = ($index === 0 && count($banks) === 1);
                                $showClass = $isOpen ? 'show' : '';
                                $expanded = $isOpen ? 'true' : 'false';
                                $collapsedClass = $isOpen ? '' : 'collapsed';
                            @endphp
                            <div class="card bank-card mb-3" data-index="{{ $index }}">
                                <div class="card-header" id="heading-{{ $index }}" style="padding: 10px 15px; display: flex; justify-content: space-between; align-items: center; background-color: #f7f8fa; border-bottom: 1px solid #ebedf2;">
                                    <h5 class="mb-0" style="margin: 0;">
                                        <button class="btn btn-link bank-title-btn text-left {{ $collapsedClass }}" type="button" data-toggle="collapse" data-target="#collapse-{{ $index }}" aria-expanded="{{ $expanded }}" aria-controls="collapse-{{ $index }}" style="color: #575962; font-weight: 500; text-decoration: none; padding: 0;">
                                            <i class="fa fa-chevron-right mr-2 transition-icon"></i>
                                            <span class="bank-name-title">{{ !empty($bankName) ? $bankName : 'Bank Details' }}</span>
                                        </button>
                                    </h5>
                                    <div>
                                        <button type="button" class="btn btn-danger btn-sm m-btn m-btn--icon remove-bank-btn" {{ count($banks) === 1 ? 'style=display:none;' : '' }}>
                                            <span><i class="fa fa-trash-o"></i><span>Remove</span></span>
                                        </button>
                                    </div>
                                </div>

                                <div id="collapse-{{ $index }}" class="collapse {{ $showClass }}" aria-labelledby="heading-{{ $index }}" data-parent="#bank-accordion">
                                    <div class="card-body" style="padding: 20px;">
                                        @if(!empty($bankId))
                                            <input type="hidden" name="banks[{{ $index }}][id]" value="{{ $bankId }}">
                                        @endif
                                        <div class="row">
                                            <div class="col-md-4 form-group">
                                                <label>Bank Name</label>
                                                <input type="text" name="banks[{{ $index }}][bank_name]" class="form-control bank-name-input"
                                                       value="{{ $bankName }}">
                                            </div>
                                            <div class="col-md-4 form-group">
                                                <label>Account Holder Name</label>
                                                <input type="text" name="banks[{{ $index }}][bank_account_holder_name]" class="form-control"
                                                       value="{{ $accountHolder }}">
                                            </div>
                                            <div class="col-md-4 form-group">
                                                <label>Account Number</label>
                                                <input type="text" name="banks[{{ $index }}][bank_account_number]" class="form-control"
                                                       value="{{ $accountNumber }}">
                                            </div>
                                            <div class="col-md-4 form-group">
                                                <label>Bank Identifier Code (IFSC / BIC)</label>
                                                <input type="text" name="banks[{{ $index }}][bank_identifier_code]" class="form-control"
                                                       value="{{ $ifsc }}"
                                                       maxlength="20">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>

            @if($isEdit)
            {{-- ── Documents ────────────────────────────────────────────────── --}}
            <div class="m-portlet m-portlet--mobile">
                <div class="m-portlet__head">
                    <div class="m-portlet__head-caption">
                        <div class="m-portlet__head-title">
                            <span class="m-portlet__head-icon"><i class="fa fa-folder-open"></i></span>
                            <h3 class="m-portlet__head-text">Documents</h3>
                        </div>
                    </div>
                </div>
                <div class="m-portlet__body" style="padding: 20px;">
                    @if(isset($documents) && count($documents) > 0)
                        <div class="table-responsive">
                            <table class="table table-striped table-bordered align-middle mb-0" style="font-size: 13px;">
                                <thead>
                                    <tr style="background-color: #f4f5f8;">
                                        <th style="width: 50px;" class="text-center">#</th>
                                        <th style="width: 60px;" class="text-center">Type</th>
                                        <th>Document Name</th>
                                        <th>Created At</th>
                                        <th style="width: 100px;" class="text-center">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($documents as $index => $doc)
                                        @php
                                            $fileName = $doc->file_name ?? basename($doc->file_path);
                                            $ext = strtolower(pathinfo($fileName, PATHINFO_EXTENSION));
                                            $iconClass = 'fa-file-text-o';
                                            if (in_array($ext, ['pdf'])) {
                                                $iconClass = 'fa-file-pdf-o text-danger';
                                            } elseif (in_array($ext, ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp'])) {
                                                $iconClass = 'fa-file-image-o text-info';
                                            } elseif (in_array($ext, ['doc', 'docx'])) {
                                                $iconClass = 'fa-file-word-o text-primary';
                                            } elseif (in_array($ext, ['xls', 'xlsx', 'csv'])) {
                                                $iconClass = 'fa-file-excel-o text-success';
                                            }
                                        @endphp
                                        <tr>
                                            <td class="text-center">{{ $index + 1 }}</td>
                                            <td class="text-center" style="font-size: 18px;">
                                                <i class="fa {{ $iconClass }}"></i>
                                            </td>
                                            <td>
                                                <a href="{{ route('admin.da-system.partner-document.view', $doc->id) }}" target="_blank" style="font-weight: 600; color: #36a3f7;">
                                                    {{ $fileName }}
                                                </a>
                                            </td>
                                            <td>
                                                {{ !empty($doc->created_at) ? \Carbon\Carbon::parse($doc->created_at)->format('Y-m-d H:i:s') : '—' }}
                                            </td>
                                            <td class="text-center">
                                                <a href="{{ route('admin.da-system.partner-document.view', $doc->id) }}" target="_blank" class="btn btn-sm btn-outline-primary" style="padding: 2px 10px; font-size: 11px;">
                                                    <i class="fa fa-eye"></i> View
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="text-center text-muted" style="padding: 25px;">
                            <i class="fa fa-folder-open-o" style="font-size: 24px; display: block; margin-bottom: 8px; color: #ccc;"></i>
                            No documents found for this partner.
                        </div>
                    @endif
                </div>
            </div>
            @endif

            {{-- ── Form Actions ────────────────────────────────────────────────── --}}
            <div class="m-portlet__foot m-portlet__no-border m-portlet__foot--fit">
                <div class="m-form__actions m-form__actions--solid" style="padding:20px 25px;">
                    <button type="submit" class="btn btn-accent m-btn m-btn--air">
                        <i class="fa fa-save"></i>&nbsp; {{ $isEdit ? 'Update Partner' : 'Save Partner' }}
                    </button>
                    <a href="/admin/da-system/partners" class="btn btn-secondary m-btn m-btn--air" style="margin-left:10px;">
                        Cancel
                    </a>
                </div>
            </div>

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

<script>
    document.addEventListener("DOMContentLoaded", function() {
        if (window.jQuery) {
            initBankAccordion();
        } else {
            var checkJQuery = setInterval(function () {
                if (window.jQuery) {
                    clearInterval(checkJQuery);
                    initBankAccordion();
                }
            }, 50);
        }
        
        function initBankAccordion() {
            var $ = window.jQuery;
            
            // Dynamic Title Update
            $(document).on('input', '.bank-name-input', function() {
                var card = $(this).closest('.bank-card');
                var titleSpan = card.find('.bank-name-title');
                var name = $(this).val().trim();
                titleSpan.text(name !== '' ? name : 'Bank Details');
            });
            
            // Add Bank details card
            $('#add-bank-btn').click(function() {
                var index = $('#bank-accordion .bank-card').length;
                var templateHtml = $('#bank-card-template').html();
                templateHtml = templateHtml.replace(/__INDEX__/g, index);
                
                $('#bank-accordion').append(templateHtml);
                
                // Hide other panels and expand the new one
                $('#bank-accordion .collapse').collapse('hide');
                $('#collapse-' + index).collapse('show');
                
                $('.remove-bank-btn').show();
            });
            
            // Remove Bank details card
            $(document).on('click', '.remove-bank-btn', function() {
                var card = $(this).closest('.bank-card');
                card.remove();
                
                var remainingCards = $('#bank-accordion .bank-card');
                if (remainingCards.length === 1) {
                    remainingCards.find('.remove-bank-btn').hide();
                }
                
                reindexBanks();
            });
            
            function reindexBanks() {
                $('#bank-accordion .bank-card').each(function(index) {
                    var card = $(this);
                    card.attr('data-index', index);
                    
                    // Update header & collapse trigger targets
                    card.find('.card-header').attr('id', 'heading-' + index);
                    
                    var titleBtn = card.find('.bank-title-btn');
                    titleBtn.attr('data-target', '#collapse-' + index);
                    titleBtn.attr('aria-controls', 'collapse-' + index);
                    
                    var collapseDiv = card.find('.collapse');
                    collapseDiv.attr('id', 'collapse-' + index);
                    collapseDiv.attr('aria-labelledby', 'heading-' + index);
                    
                    // Update inputs name attribute
                    card.find('input').each(function() {
                        var input = $(this);
                        var name = input.attr('name');
                        if (name) {
                            var newName = name.replace(/banks\[\d+\]/, 'banks[' + index + ']');
                            input.attr('name', newName);
                        }
                    });
                });
            }
        }
    });
</script>

@include('admin.layouts.footer')