@extends('layouts.app')

@section('title','Project Details')
@section('page_title','Project Details')

@section('content')

<div style="background:#fff;padding:24px;border-radius:8px;">

    <div style="display:flex;justify-content:space-between;align-items:center;">
        <h3 style="font-size:24px;font-weight:bold;">
            {{ $project->project_name }}
        </h3>

        <div>
            <a href="{{ route('projects.edit',$project->id) }}"
               style="background:#f59e0b;color:#fff;padding:10px 15px;border-radius:6px;text-decoration:none;">
                Edit Project
            </a>

            <a href="{{ route('projects.index') }}"
               style="background:#6b7280;color:#fff;padding:10px 15px;border-radius:6px;text-decoration:none;margin-left:5px;">
                Back
            </a>
        </div>
    </div>

    <hr style="margin:20px 0;">

    <h4 style="font-size:18px;font-weight:bold;margin-bottom:15px;">Basic Details</h4>

    <div style="display:grid;grid-template-columns:1fr 1fr;gap:15px;">
        <p><b>Code:</b> {{ $project->project_code }}</p>
        <p><b>Type:</b> {{ $project->project_type }}</p>
        <p><b>Category:</b> {{ $project->project_category }}</p>
        <p><b>Status:</b> {{ ucwords(str_replace('_',' ', $project->status)) }}</p>
    </div>

    <hr style="margin:20px 0;">

    <h4 style="font-size:18px;font-weight:bold;margin-bottom:15px;">Financial Details</h4>

    <div style="display:grid;grid-template-columns:1fr 1fr;gap:15px;">
        <p><b>Cost:</b> {{ $project->project_cost }}</p>
        <p><b>Currency:</b> {{ $project->currency }}</p>
        <p><b>Advance:</b> {{ $project->advance_amount }}</p>
        <p><b>Received:</b> {{ $project->received_amount }}</p>
        <p><b>Pending:</b> {{ $project->pending_amount }}</p>
        <p><b>Payment Type:</b> {{ ucwords(str_replace('_',' ', $project->payment_type)) }}</p>
    </div>

    <hr style="margin:20px 0;">

    <h4 style="font-size:18px;font-weight:bold;margin-bottom:15px;">Timeline</h4>

    <div style="display:grid;grid-template-columns:1fr 1fr;gap:15px;">
        <p><b>Start Date:</b> {{ $project->start_date }}</p>
        <p><b>Expected Delivery:</b> {{ $project->expected_delivery }}</p>
        <p><b>Actual Delivery:</b> {{ $project->actual_delivery_date }}</p>
    </div>

    <hr style="margin:20px 0;">

    <h4 style="font-size:18px;font-weight:bold;margin-bottom:15px;">Domain / Hosting</h4>

    <div style="display:grid;grid-template-columns:1fr 1fr;gap:15px;">
        <p><b>Domain:</b> {{ $project->domain_name }}</p>
        <p><b>Domain Expiry:</b> {{ $project->domain_expiry_date }}</p>
        <p><b>Hosting Provider:</b> {{ $project->hosting_provider }}</p>
        <p><b>Hosting Expiry:</b> {{ $project->hosting_expiry_date }}</p>
        <p><b>SSL Expiry:</b> {{ $project->ssl_expiry_date }}</p>
    </div>

    <hr style="margin:20px 0;">

    <h4 style="font-size:18px;font-weight:bold;margin-bottom:15px;">URLs</h4>

    <div style="display:grid;grid-template-columns:1fr 1fr;gap:15px;">
        <p><b>GitHub:</b> {{ $project->github_url }}</p>
        <p><b>Staging:</b> {{ $project->staging_url }}</p>
        <p><b>Production:</b> {{ $project->production_url }}</p>
    </div>

    <hr style="margin:20px 0;">

    <p><b>Scope:</b></p>
    <div style="background:#f9fafb;padding:12px;border-radius:6px;">
        {{ $project->scope }}
    </div>

    <p style="margin-top:15px;"><b>Remarks:</b></p>
    <div style="background:#f9fafb;padding:12px;border-radius:6px;">
        {{ $project->remarks }}
    </div>

</div>

<div style="background:#fff;padding:24px;border-radius:8px;margin-top:25px;">

    <h3 style="font-size:18px;font-weight:bold;margin-bottom:15px;">
        Milestones / Installments
    </h3>

    <form method="POST" action="{{ route('projects.milestones.store',$project->id) }}" style="margin-bottom:20px;">
        @csrf

        <div style="display:grid;grid-template-columns:1fr 160px 160px 180px;gap:10px;">
            <input type="text" name="title" required placeholder="Milestone title"
                   style="padding:10px;border:1px solid #ccc;">

            <input type="text" name="amount" placeholder="Amount"
                   style="padding:10px;border:1px solid #ccc;">

            <input type="date" name="due_date"
                   style="padding:10px;border:1px solid #ccc;">

            <button type="submit"
                    style="background:#16a34a;color:white;border:0;border-radius:6px;">
                Add Milestone
            </button>
        </div>

        <textarea name="remarks" placeholder="Remarks" rows="2"
                  style="width:100%;margin-top:10px;padding:10px;border:1px solid #ccc;"></textarea>
    </form>

    <table style="width:100%;border-collapse:collapse;">
        <thead>
            <tr style="background:#e5e7eb;">
                <th style="padding:10px;text-align:left;">Title</th>
                <th style="padding:10px;text-align:left;">Amount</th>
                <th style="padding:10px;text-align:left;">Due Date</th>
                <th style="padding:10px;text-align:left;">Status</th>
                <th style="padding:10px;text-align:left;">Remarks</th>
            </tr>
        </thead>

        <tbody>
            @forelse($project->milestones as $milestone)
                <tr style="border-bottom:1px solid #ddd;">
                    <td style="padding:10px;">{{ $milestone->title }}</td>
                    <td style="padding:10px;">{{ $milestone->amount }}</td>
                    <td style="padding:10px;">{{ $milestone->due_date }}</td>
                    <td style="padding:10px;">
                        <form method="POST" action="{{ route('milestones.updateStatus',$milestone->id) }}">
                            @csrf

                            <select name="status" onchange="this.form.submit()"
                                    style="padding:6px;border:1px solid #ccc;">
                                @foreach(['pending','in_progress','completed','paid'] as $status)
                                    <option value="{{ $status }}" @selected($milestone->status == $status)>
                                        {{ ucwords(str_replace('_',' ',$status)) }}
                                    </option>
                                @endforeach
                            </select>
                        </form>
                    </td>
                    <td style="padding:10px;">{{ $milestone->remarks }}</td>
                </tr>
            @empty
                <tr>
                    <td colspan="5" style="padding:10px;color:#6b7280;">
                        No milestones added yet.
                    </td>
                </tr>
            @endforelse
        </tbody>
    </table>

</div>

<div style="background:#fff;padding:24px;border-radius:8px;margin-top:25px;">

    <h3 style="font-size:18px;font-weight:bold;margin-bottom:15px;">
        Payments
    </h3>

    <form method="POST" action="{{ route('projects.payments.store',$project->id) }}" style="margin-bottom:20px;">
        @csrf

        <div style="display:grid;grid-template-columns:1fr 140px 160px 160px 180px;gap:10px;">
            <input type="text" name="payment_title" required placeholder="Payment title"
                   style="padding:10px;border:1px solid #ccc;">

            <input type="text" name="amount" placeholder="Amount"
                   style="padding:10px;border:1px solid #ccc;">

            <input type="date" name="due_date"
                   style="padding:10px;border:1px solid #ccc;">

            <select name="payment_mode" style="padding:10px;border:1px solid #ccc;">
                <option value="">Mode</option>
                <option value="Cash">Cash</option>
                <option value="Bank Transfer">Bank Transfer</option>
                <option value="UPI">UPI</option>
                <option value="Stripe">Stripe</option>
                <option value="PayPal">PayPal</option>
            </select>

            <button type="submit"
                    style="background:#16a34a;color:white;border:0;border-radius:6px;">
                Add Payment
            </button>
        </div>

        <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px;">
            <input type="text" name="transaction_id" placeholder="Transaction ID"
                   style="padding:10px;border:1px solid #ccc;">

            <textarea name="remarks" placeholder="Remarks" rows="2"
                      style="padding:10px;border:1px solid #ccc;"></textarea>
        </div>
    </form>

    <table style="width:100%;border-collapse:collapse;">
        <thead>
            <tr style="background:#e5e7eb;">
                <th style="padding:10px;text-align:left;">Title</th>
                <th style="padding:10px;text-align:left;">Amount</th>
                <th style="padding:10px;text-align:left;">Due Date</th>
                <th style="padding:10px;text-align:left;">Paid Date</th>
                <th style="padding:10px;text-align:left;">Mode</th>
                <th style="padding:10px;text-align:left;">Status</th>
                <th style="padding:10px;text-align:left;">Remarks</th>
            </tr>
        </thead>

        <tbody>
            @forelse($project->payments as $payment)
                <tr style="border-bottom:1px solid #ddd;">
                    <td style="padding:10px;">{{ $payment->payment_title }}</td>
                    <td style="padding:10px;">{{ $payment->amount }}</td>
                    <td style="padding:10px;">{{ $payment->due_date }}</td>
                    <td style="padding:10px;">{{ $payment->paid_date }}</td>
                    <td style="padding:10px;">{{ $payment->payment_mode }}</td>
                    <td style="padding:10px;">
                        <form method="POST" action="{{ route('payments.updateStatus',$payment->id) }}">
                            @csrf

                            <select name="status" onchange="this.form.submit()"
                                    style="padding:6px;border:1px solid #ccc;">
                                @foreach(['pending','partial','paid','overdue'] as $status)
                                    <option value="{{ $status }}" @selected($payment->status == $status)>
                                        {{ ucwords(str_replace('_',' ',$status)) }}
                                    </option>
                                @endforeach
                            </select>
                        </form>
                    </td>
                    <td style="padding:10px;">{{ $payment->remarks }}</td>
                </tr>
            @empty
                <tr>
                    <td colspan="7" style="padding:10px;color:#6b7280;">
                        No payments added yet.
                    </td>
                </tr>
            @endforelse
        </tbody>
    </table>

</div>

<h3 style="font-size:18px;font-weight:bold;margin:25px 0 15px;">
    Reminder History
</h3>

@foreach($project->payments as $payment)
    @foreach($payment->reminders as $reminder)
        <div style="background:#f9fafb;padding:10px;border-left:4px solid #2563eb;margin-bottom:8px;">
            <b>{{ ucfirst($reminder->reminder_type) }}</b>
            for <b>{{ $payment->payment_title }}</b>

            <br>

            {{ $reminder->message }}

            <br>

            <small>
                Sent at: {{ $reminder->sent_at }}
            </small>
        </div>
    @endforeach
@endforeach

@endsection