@extends('staff.layout')

@section('content')

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<style>
    .proposal-card {
        padding: 20px;
        border: 1px solid #ddd;
        border-radius: 8px;
        background: #fafafa;
        font-family: Arial, sans-serif;
        box-shadow: 0 2px 6px rgb(0 0 0 / 0.1);
        margin-bottom: 20px;
        height: 100%;
        
    }
    .proposal-card h4 {
        margin-bottom: 10px;
    }
    .proposal-card p {
        margin: 5px 0;
    }
    .view-btn {
        display: inline-block;
        padding: 8px 15px;
        background-color:rgb(44, 19, 134);
        color: white;
        border-radius: 4px;
        text-decoration: none;
    }
    
    .dropdown-container {
        position: relative;
        display: inline-block;
    }

    .dropdown-options {
        display: none;
        position: absolute;
        top: 35px;
        left: 0;
        background-color: #fff;
        box-shadow: 0 0 10px rgba(0,0,0,0.15);
        border-radius: 5px;
        z-index: 100;
    }

    .dropdown-container:hover .dropdown-options {
        display: block;
    }

    .dropdown-options form {
        margin: 0;
    }

    .dropdown-options button {
        display: block;
        width: 100%;
        padding: 8px 16px;
        background: white;
        color: black;
        text-align: left;
        border: none;
        border-bottom: 1px solid #ddd;
        cursor: pointer;
    }

    .dropdown-options button:hover {
        background-color: #f0f0f0;
    }

</style>


  <a href="{{ route('staff.proposal', ['id' => $profile->id]) }}" class="view-btn">Create Proposal</a>

<a href="{{ route('followup.history', ['lead_id' => base64_encode($lead_id)]) }}" class="view-btn">View FollowUp History</a>
{{-- Success Message --}}
@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert" style="width: 350px;">
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif

{{-- Error Message --}}
@if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show" role="alert" style="width: 350px;">
        {{ session('error') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif

{{-- Profile Update Form --}}
<form action="{{ route('update') }}" method="POST">
    @csrf
    <input type="hidden" name="id" value="{{ $profile->id }}">

    <div class="container">
        <div class="row">
            <div class="col-md-3 mb-3">
                <label for="name">Full Name</label>
                <input type="text" name="name" class="form-control" id="name"
                       value="{{ old('name', $profile->name) }}">
            </div>

            <div class="col-md-3 mb-3">
                <label for="email">Email</label>
                <input type="email" name="email" class="form-control" id="email"
                       value="{{ old('email', $profile->email) }}">
            </div>

             <div class="col-md-3 mb-3">
                <label for="phone">Phone Number</label>
                <input type="text" name="phone" class="form-control" id="phone"
                       value="{{ old('phone', $profile->phone) }}">
            </div>

            <div class="col-md-3 mb-3">
                <label for="requirement">Requirement</label>
                <input type="text" name="requirement" class="form-control" id="requirement"
                       value="{{ old('requirement', $profile->requirement) }}">
            </div>
        </div>

        <div class="row">
           <div class="col-md-3 mb-3">
                <label for="estimate">Client Estimate to launch</label>
                <input type="text" name="estimate" class="form-control" id="estimate"
                       value="{{ old('estimate', $profile->estimate) }}">
            </div>

            <div class="col-md-3 mb-3">
                <label for="budget">Budjet</label>
                <input type="text" name="budget" class="form-control" id="budget"
                       value="{{ old('budget', $profile->budget) }}">
            </div>

             <div class="col-md-3 mb-3">
                <label for="type">Type</label>
                <input type="text" name="type" class="form-control" id="type"
                       value="{{ old('type', $profile->type) }}">
            </div>

            <div class="col-md-3 mb-3">
                <label for="requirement">Lead Source</label>
                <input type="text" name="source" class="form-control" id="source"
                       value="{{ old('source', $profile->source) }}">
            </div>
     
            
        </div>

        <div class="row">
           <div class="col-md-3 mb-3">
                <label for="estimate">Mode</label>
                <input type="text" name="mode" class="form-control" id="mode"
                       value="{{ old('mode', $profile->mode) }}">
            </div>

            <div class="col-md-3 mb-3">
                <label for="country">Country</label>
                <input type="text" name="country" class="form-control" id="country"
                       value="{{ old('country', $profile->country) }}">
            </div>

            <div class="col-md-3 mb-3">
                <label for="state">State</label>
                <input type="text" name="state" class="form-control" id="state"
                       value="{{ old('state', $profile->state) }}">
            </div>

            <div class="col-md-3 mb-3">
                <label for="district">District</label>
                <input type="text" name="district" class="form-control" id="district"
                       value="{{ old('district', $profile->district) }}">
            </div>

             </div>


        <div class="row">
            <div class="col-md-12 text-right">
                <button type="submit" class="btn btn-primary" 
                        style="background-color:rgb(44, 19, 134); border:none;">
                    Update Profile
                </button>
            </div>
        </div>
    </div>
</form>

{{-- Project Proposals Section --}}
<div class="container">
    <h3 class="text-center my-4">PROJECT PROPOSALS</h3>
    <div class="row">
        @foreach ($proposals as $proposal)
            <div class="col-md-4 d-flex">
                <div class="proposal-card w-100 position-relative p-3" 
                     style="border: 1px solid #ccc; border-radius: 8px;">

                    {{-- Top-right action buttons --}}
                    <div style="position: absolute; top: 10px; right: 10px; display: flex; gap: 5px;">
                        <form action="{{ route('edit_proposal', $proposal->id) }}" method="GET">
                            @csrf
                            <button type="submit" title="Edit" 
                                    style="padding: 6px 10px; background-color:white; color: white; border: none; border-radius: 5px;">
                                ✏️
                            </button>
                        </form>

                        <form action="{{ route('download_pdf', $proposal->id) }}" method="POST">
                            @csrf
                            <button type="submit" title="Download"
                                    style="padding: 6px 10px; background-color: white; color: white; border: none; border-radius: 5px;">
                                ⬇️
                            </button>
                        </form>
                    </div>

                    {{-- Proposal Info --}}
                    <h6>#{{ $proposal->proposal_id }}</h6>
                    <p><strong>Date:</strong> {{ \Carbon\Carbon::parse($proposal->date)->format('d-m-Y') }}</p>
                    <p><strong>Open Till:</strong> {{ \Carbon\Carbon::parse($proposal->open_till)->format('d-m-Y') }}</p>
                    <br>

                    {{-- Action Buttons --}}
                    <div style="display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap;">
                        <a href="{{ route('view_proposal', $proposal->id) }}" 
                           class="view-btn"
                           style="padding: 8px 16px; background-color: #333; color: white; text-decoration: none; border-radius: 5px;">
                            View Details
                        </a>

                        <form action="{{ route('send_mail_api', $proposal->id) }}" method="POST">
                            @csrf
                            <button type="submit" 
                                    style="padding: 8px 16px; background-color: darkorange; color: white; border: none; border-radius: 5px;">
                                📧 Send Email
                            </button>
                        </form>

                        {{-- Draft Actions --}}
<div class="mt-3 pt-2 border-top" style="margin-top: 20px; padding-top: 15px;">
    <p style="font-weight: bold;">Draft Actions:</p>

    <div style="display: flex; gap: 10px; flex-wrap: wrap;">
        
        {{-- View Draft --}}
        <a href="{{ route('view_draft', ['id' => $proposal->id]) }}"
           style="padding: 8px 16px; background-color: rgb(30, 40, 59); color: white; border: none; border-radius: 5px; text-decoration: none;">
            📄 View Draft
        </a>

        {{-- Download Draft PDF --}}
        <form action="{{ route('pdf_draft_download', $proposal->id) }}" method="POST" style="display: inline-block;">
            @csrf
            <button type="submit" title="Download"
                    style="padding: 8px 16px; background-color:white;  border: none; border-radius: 5px; width:10px;">
                ⬇️ 
            </button>
        </form>

        {{-- Edit Draft --}}
        <form action="{{ route('edit_draft', $proposal->id) }}" method="GET" style="display: inline-block;">
            @csrf
            <button type="submit" title="Edit Draft"
                    style="padding: 8px 16px; background-color:white; border: none; border-radius: 5px;">
                ✏️ 
            </button>
        </form>

    </div>
</div>

                    </div>

                </div>
            </div>
        @endforeach
    </div>
</div>

              


@endsection