@extends('layouts.app_backend')

@section('content')
<div class="container-full">
    <section class="content">
        <div class="box">
            <div class="box-header with-border">
                <h4 class="box-title">EDIT DEAL</h4>
            </div>

            <div class="box-body">
                <div class="row">
                    <div class="col">
                        <form method="POST" action="{{ route('admin.deals.update', $deal->id) }}" enctype="multipart/form-data">
                            @csrf
                            <div class="row">
                                <div class="col-md-6 form-group">
                                    <label for="deal_name">Deal Name</label>
                                    <input type="text" name="deal_name" value="{{ old('deal_name', $deal->deal_name) }}" class="form-control">
                                    @error('deal_name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-6 form-group">
                                    <label for="total_investment">Total Investment|Budget</label>
                                    <input type="text" name="total_investment" value="{{ old('total_investment', $deal->total_investment) }}" class="form-control">
                                    @error('total_investment')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-6 form-group">
                                    <label for="category_id">Category</label>
                                    <select name="category_id" id="category_id" class="form-select form-control">
                                        <option value="">Select Category</option>
                                        @foreach($categories as $category)
                                        <option value="{{ $category->id }}" {{ old('category_id', $category->id) == $category->id ? 'selected' : '' }}>
                                            {{ $category->name }}
                                        </option>
                                        @endforeach
                                    </select>
                                    @error('category_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-6 form-group">
                                    <label for="start_date">Start Date</label>
                                    <input type="date" name="start_date" value="{{ old('start_date', $deal->start_date) }}" class="form-control">
                                    @error('start_date')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-6 form-group">
                                    <label for="end_date">End Date</label>
                                    <input type="date" name="end_date" value="{{ old('end_date', $deal->end_date) }}" class="form-control">
                                    @error('end_date')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="row mb-2 documents-block">
                                <div class="col-md-3 form-group">
                                    <label for="document_name">Document Name</label>
                                    <input type="text" name="document_name[]" class="form-control" placeholder="deal document"> 
                                </div>
                                <div class="col-md-3 form-group">
                                    <label for="document_file">Upload File</label>
                                    <input type="file" name="document_files[]" class="form-control"> 
                                </div>
                                <div class="col-md-2 form-group mt-4">
                                    <button type="button" id="more-documents" class="btn btn-info text-white"><i class="fa-solid fa-plus"></i></button>
                                    <button type="button" class="btn btn-danger remove-document text-white"><i class="fa-solid fa-trash"></i></button>
                                </div>
                            </div>
                            <div class="text-xs-right">
                                <button type="submit" class="btn btn-info">ADD NEW DEAL</button>
                            </div>
                        </form>
                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div>
        </div>
    </section>
</div>

<script>
    $(document).ready(function () {
        // Event delegation for dynamically added "More documents" buttons
        $(document).on('click', '#more-documents', function () { // Change this line
            // Clone the documents-block div
            var clonedBlock = $('.documents-block:last').clone();

            // Clear input values in the cloned block
            clonedBlock.find('input').val('');
            clonedBlock.find('select').val('');

            // Add the cloned block after the last documents-block div
            $('.documents-block:last').after(clonedBlock);

            // Display the remove-document button in the cloned block
            clonedBlock.find('.remove-document').show();
        });

        // Event delegation for dynamically added "Remove documents" buttons
        $(document).on('click', '.remove-document', function () { // Change this line
            var result = confirm("Are you sure you want to remove this document?");
            if (result) {
                // Remove the corresponding documents-block div
                $(this).closest('.documents-block').remove();
            }
        });
    });
</script>
<style>
    .remove-document {
        display: none; /* Initially hidden */
    }
</style>
@endsection