@extends('layouts.app')
@section('title',$collateral->code)
@section('content')
<x-ui.page-toolbar :title="$collateral->code" description="Collateral custody profile, storage history, documents and printable identification." :breadcrumbs="[['label'=>'Dashboard','url'=>route('dashboard')],['label'=>'Collateral','url'=>route('collateral.index')],['label'=>$collateral->code]]">
    <x-slot:actions>
        <a class="mf-btn" target="_blank" href="{{ route('collateral.label',$collateral) }}">Print label</a>
        <a class="mf-btn" target="_blank" href="{{ route('collateral.receipt',$collateral) }}">Receipt</a>
        @if($collateral->movements->contains(fn($movement)=>in_array($movement->to_status,['released','returned'])))<a class="mf-btn" target="_blank" href="{{ route('collateral.release-acknowledgement',$collateral) }}">Release acknowledgement</a>@endif
        @if(auth()->user()->can('collateral.manage'))<a class="mf-btn mf-btn-primary" href="{{ route('collateral.edit',$collateral) }}">Edit details</a>@endif
    </x-slot:actions>
</x-ui.page-toolbar>

<div class="grid gap-4 lg:grid-cols-3">
    <section class="mf-form-section lg:col-span-2">
        <div class="mf-form-section-header" style="padding:10px"><div><h2>Collateral details</h2><p>Permanent identity and valuation information.</p></div><span class="mf-badge {{ in_array($collateral->status,['accepted','in_custody'])?'mf-badge-success':'mf-badge-muted' }}">{{ str($collateral->status)->replace('_',' ')->title() }}</span></div>
        <div class="mf-form-section-body">
            <dl class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 text-sm">
                <div><dt class="text-muted-foreground">Customer</dt><dd class="font-medium"><a class="text-primary hover:underline" href="{{ route('customers.show',$collateral->customer) }}">{{ $collateral->customer->full_name }}</a></dd><dd class="text-xs text-muted-foreground">{{ $collateral->customer->customer_number }}</dd></div>
                <div><dt class="text-muted-foreground">Branch</dt><dd class="font-medium">{{ $collateral->branch->name }}</dd></div>
                <div><dt class="text-muted-foreground">Category</dt><dd class="font-medium">{{ $collateral->category->name }}</dd></div>
                <div><dt class="text-muted-foreground">Item</dt><dd class="font-medium">{{ $collateral->item }}</dd></div>
                <div><dt class="text-muted-foreground">Brand / model</dt><dd>{{ collect([$collateral->brand,$collateral->model])->filter()->join(' / ') ?: '—' }}</dd></div>
                <div><dt class="text-muted-foreground">Serial number</dt><dd>{{ $collateral->serial_number ?: '—' }}</dd></div>
                <div><dt class="text-muted-foreground">Colour</dt><dd>{{ $collateral->colour ?: '—' }}</dd></div>
                <div><dt class="text-muted-foreground">Condition</dt><dd>{{ $collateral->condition ?: '—' }}</dd></div>
                <div><dt class="text-muted-foreground">Received</dt><dd>{{ optional($collateral->received_at)->format('d M Y') }}</dd><dd class="text-xs text-muted-foreground">{{ $collateral->receiver?->name ?: 'Unassigned' }}</dd></div>
                <div><dt class="text-muted-foreground">Estimated value</dt><dd>{{ $collateral->estimated_value ?? '—' }}</dd></div>
                <div><dt class="text-muted-foreground">Accepted value</dt><dd class="font-medium">{{ $collateral->accepted_value ?? '—' }}</dd></div>
                <div><dt class="text-muted-foreground">Storage</dt><dd>{{ $collateral->storage_location ?: '—' }}</dd></div>
            </dl>
            @if($collateral->description)<div class="mt-4 border-t pt-4 text-sm"><div class="text-muted-foreground">Description</div><p class="mt-1">{{ $collateral->description }}</p></div>@endif
        </div>
    </section>

    <section class="mf-form-section">
        <div class="mf-form-section-header" style="padding:10px"><div><h2>Identification</h2><p>Printable Code 39 label.</p></div></div>
        <div class="mf-form-section-body"><div style="color:currentColor">{!! $barcodeSvg !!}</div><div class="mt-3 text-center text-xs text-muted-foreground">Scan or search using {{ $collateral->code }}</div></div>
    </section>
</div>

@if(auth()->user()->can('collateral.custody'))
<section class="mf-form-section mt-4">
    <div class="mf-form-section-header" style="padding:10px"><div><h2>Custody movement</h2><p>Every status or location change is permanently recorded.</p></div></div>
    <div class="mf-form-section-body">
        <form method="POST" action="{{ route('collateral.move',$collateral) }}" class="mf-form">@csrf
            <x-ui.form-grid>
                <div class="mf-col-3"><label class="mf-field-label">Status</label><select name="status" class="mf-input" required>@foreach($statuses as $status)<option value="{{ $status }}" @selected($collateral->status===$status)>{{ str($status)->replace('_',' ')->title() }}</option>@endforeach</select></div>
                <div class="mf-col-3"><label class="mf-field-label">Store room</label><input name="store_room" value="{{ $collateral->store_room }}" class="mf-input"></div>
                <div class="mf-col-3"><label class="mf-field-label">Shelf / position</label><input name="shelf" value="{{ $collateral->shelf }}" class="mf-input"></div>
                <div class="mf-col-3"><label class="mf-field-label">Movement note</label><input name="notes" class="mf-input" placeholder="Reason / handover details"></div>
            </x-ui.form-grid>
            <div class="mt-3 flex justify-end"><button class="mf-btn mf-btn-primary">Record movement</button></div>
        </form>
    </div>
</section>
@endif

<div class="grid gap-4 mt-4 lg:grid-cols-2">
    <section class="mf-form-section">
        <div class="mf-form-section-header" style="padding:10px"><div><h2>Photos & documents</h2><p>Private evidence and supporting files.</p></div></div>
        <div class="mf-form-section-body">
            <div class="space-y-2">
                @forelse($collateral->files as $file)
                    <div class="flex items-center justify-between gap-3 border-b py-2 text-sm"><div><div class="font-medium">{{ $file->document_type ?: str($file->kind)->title() }}</div><div class="text-xs text-muted-foreground">{{ $file->original_name }} · {{ optional($file->created_at)->format('d M Y H:i') }}</div></div><a class="text-primary hover:underline" href="{{ route('collateral.files.download',[$collateral,$file]) }}">Download</a></div>
                @empty<p class="text-sm text-muted-foreground">No files uploaded yet.</p>@endforelse
            </div>

            @if(auth()->user()->can('collateral.documents'))
                <div class="mt-4 grid gap-4 border-t pt-4 md:grid-cols-2">
                    <form method="POST" enctype="multipart/form-data" action="{{ route('collateral.files.store',$collateral) }}" class="mf-form">
                        @csrf
                        <input type="hidden" name="kind" value="photo">
                        <div class="text-sm font-medium">Add photos</div>
                        <p class="mt-1 text-xs text-muted-foreground">Select several collateral images and upload them together.</p>
                        <div class="mt-3">
                            <label class="mf-field-label" for="collateral_photos">Photos</label>
                            <input id="collateral_photos" type="file" name="attachments[]" class="mf-input" accept="image/png,image/jpeg,image/webp" multiple required>
                            <p class="mf-field-help">JPEG, PNG or WebP. Up to 20 images, maximum 8 MB each.</p>
                            @error('attachments')<p class="mf-field-error">{{ $message }}</p>@enderror
                            @error('attachments.*')<p class="mf-field-error">{{ $message }}</p>@enderror
                        </div>
                        <div class="mt-3">
                            <label class="mf-field-label" for="photo_notes">Note</label>
                            <input id="photo_notes" name="notes" class="mf-input" placeholder="Optional note for these photos">
                        </div>
                        <div class="mt-3 flex justify-end"><button class="mf-btn mf-btn-primary">Upload photos</button></div>
                    </form>

                    <form method="POST" enctype="multipart/form-data" action="{{ route('collateral.files.store',$collateral) }}" class="mf-form">
                        @csrf
                        <input type="hidden" name="kind" value="document">
                        <div class="text-sm font-medium">Add documents</div>
                        <p class="mt-1 text-xs text-muted-foreground">Ownership papers, valuation reports and other supporting evidence.</p>
                        <div class="mt-3">
                            <label class="mf-field-label" for="document_type">Document type</label>
                            <input id="document_type" name="document_type" class="mf-input" placeholder="Ownership paper, valuation report…" required>
                        </div>
                        <div class="mt-3">
                            <label class="mf-field-label" for="collateral_documents">Documents</label>
                            <input id="collateral_documents" type="file" name="attachments[]" class="mf-input" accept=".pdf,.doc,.docx,image/png,image/jpeg,image/webp" multiple required>
                            <p class="mf-field-help">Select up to 20 files, maximum 8 MB each.</p>
                        </div>
                        <div class="mt-3">
                            <label class="mf-field-label" for="document_notes">Note</label>
                            <input id="document_notes" name="notes" class="mf-input" placeholder="Optional note">
                        </div>
                        <div class="mt-3 flex justify-end"><button class="mf-btn">Upload documents</button></div>
                    </form>
                </div>
            @endif
        </div>
    </section>

    <section class="mf-form-section">
        <div class="mf-form-section-header" style="padding:10px"><div><h2>Custody history</h2><p>Permanent chronological record of receipt, movement and status changes.</p></div></div>
        <div class="mf-form-section-body">
            <div class="space-y-3">
                @forelse($collateral->movements as $movement)
                    <div class="border-b pb-3 text-sm"><div class="flex items-start justify-between gap-3"><div class="font-medium">{{ str($movement->action)->replace('_',' ')->title() }}</div><div class="text-xs text-muted-foreground">{{ optional($movement->moved_at)->format('d M Y H:i') }}</div></div><div class="mt-1 text-xs text-muted-foreground">{{ $movement->from_status ? str($movement->from_status)->replace('_',' ')->title().' → ' : '' }}{{ $movement->to_status ? str($movement->to_status)->replace('_',' ')->title() : '' }} · {{ collect([$movement->to_store_room,$movement->to_shelf])->filter()->join(' → ') ?: 'No storage location' }}</div><div class="text-xs text-muted-foreground">By {{ $movement->mover?->name ?: 'System' }}@if($movement->notes) · {{ $movement->notes }}@endif</div></div>
                @empty<p class="text-sm text-muted-foreground">No custody history recorded.</p>@endforelse
            </div>
        </div>
    </section>
</div>
@endsection
