@extends('layouts.app')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
<style>
    .container {
        max-width: 12 mt-300px;
        margin: 0 auto;
    }

    .row {
        margin-bottom: 1rem;
    }

    .form-label {
        margin-right: 1rem;
    }

    .d-flex {
        display: flex;
        align-items: center;
    }

    .form-select,
    .form-control {
        flex-grow: 1;
    }

</style>
@section('title')
SUPPLIER EDIT
@endsection
@section('button')
<a type="button" class="btn btn-info" href="{{ route('supplier.index') }}">
    <i class="bi bi-arrow-left"></i> Back
</a>
@endsection
@section('content')
<div class="card">
    <form method="post" action="{{ route('supplier.update', $supplier->id) }}">
        @csrf
        <div class="card-body">
            <div class="row">
                <h5>Company Detail</h5>
            </div>
            <br>
            <div class="row mb-2">
                <div class="col-lg-6 col-sm-6 col-12 mt-3">
                    <div class="row align-items-center">
                        <label class="form-label col-4" for="name">Supplier Name:</label>
                        <div class="col-6">
                            <input type="text" class="form-control" id="name" name="name"
                                value="{{ $supplier->name }}" placeholder="Enter Supplier Name"
                                style="border-radius: 10px;">
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-6 col-12 mt-3">
                    <div class="row align-items-center">
                        <label class="form-label col-4" for="code">Supplier Code:</label>
                        <div class="col-6">
                            <input type="text" class="form-control" id="code" name="code"
                                value="{{ $supplier->code }}" placeholder="Enter Supplier Code"
                                style="border-radius: 10px;">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mb-2">
                <div class="col-lg-6 col-sm-6 col-12 mt-3">
                    <div class="row align-items-center">
                        <label class="form-label col-4" for="phone_no">Phone No:</label>
                        <div class="col-6">
                            <input type="number" class="form-control" id="phone_no" name="phone_no" min="0"
                                value="{{ $supplier->phone_no }}" placeholder="Enter Phone No" style="border-radius: 10px;">
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-6 col-12 mt-3">
                    <div class="row align-items-center">
                        <label class="form-label col-4" for="fax">Fax:</label>
                        <div class="col-6">
                            <input type="number" class="form-control" id="fax" name="fax" min="0"
                                value="{{ $supplier->fax }}" placeholder="Enter Fax" style="border-radius: 10px;">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6 col-sm-6 col-12 mt-3">
                    <div class="row align-items-center">
                        <label class="form-label col-4" for="address">Address:</label>
                        <div class="col-6">
                            <textarea name="address" id="address" class="form-control" rows="1" placeholder="Enter Address"
                                style="border-radius: 10px;">{{ $supplier->address }}</textarea>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-6 col-12 mt-3">
                    <div class="row align-items-center">
                        <label class="form-label col-4" for="group">Group:</label>
                        <div class="col-6">
                            <select class="form-select custom-select-background" id="group" name="group" style="width: 100% !important;">
                                <option value="LOCAL" @if ($supplier->group == 'LOCAL') selected @endif>LOCAL</option>
                                <option value="OVERSEA" @if ($supplier->group == 'OVERSEA') selected @endif>OVERSEA</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <br>
            <div class="row">
                <h5>Contact Person Detail</h5>
            </div>
            <br>
            <div class="row mt-4">
                <div class="col-lg-6 col-sm-12 mt-3">
                    <div class="row align-items-center">
                        <label class="form-label col-4" for="name">Name:</label>
                        <div class="col-6">
                            <input type="text" class="form-control" id="contact_person_name" name="contact_person_name"
                                value="{{$supplier->contact_person_name }}" placeholder="Enter Name" style="border-radius: 10px;">
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-12 mt-3">
                    <div class="row align-items-center">
                        <label class="form-label col-4" for="department">Department:</label>
                        <div class="col-6">
                            <input type="text" class="form-control" id="contact_person_department" name="contact_person_department"
                                value="{{ $supplier->contact_person_department }}" placeholder="Enter Department" style="border-radius: 10px;">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mt-2">
                <div class="col-lg-6 col-sm-12 mt-3">
                    <div class="row align-items-center">
                        <label class="form-label col-4" for="phone_office">Phone (Office):</label>
                        <div class="col-6">
                            <input type="number" class="form-control" id="contact_person_telephone" name="contact_person_telephone" min="0"
                                value="{{ $supplier->contact_person_telephone }}" placeholder="Enter Phone Office" style="border-radius: 10px;">
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-12 mt-3">
                    <div class="row align-items-center">
                        <label class="form-label col-4" for="phone_mobile">Phone (Mobile):</label>
                        <div class="col-6">
                            <input type="number" class="form-control" id="contact_person_mobile" name="contact_person_mobile" min="0"
                                value="{{ $supplier->contact_person_mobile }}" placeholder="Enter Phone Mobile" style="border-radius: 10px;">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mt-2">
                <div class="col-lg-6 col-sm-12 mt-3">
                    <div class="row align-items-center">
                        <label class="form-label col-4" for="email">Email:</label>
                        <div class="col-6">
                            <input type="email" class="form-control" id="contact_person_email" name="contact_person_email"
                                value="{{ $supplier->contact_person_email }}" placeholder="Enter Email" style="border-radius: 10px;">
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-12 mt-3">
                    <div class="row align-items-center">
                        <label class="form-label col-4" for="fax">Fax:</label>
                        <div class="col-6">
                            <input type="number" class="form-control" id="contact_person_fax" name="contact_person_fax" min="0"
                                value="{{ $supplier->contact_person_fax }}" placeholder="Enter Fax" style="border-radius: 10px;">
                        </div>
                    </div>
                </div>

            </div>
            <div class="d-flex justify-content-between align-items-center mt-2">
    <h4 class="mb-0">Shipping Mode</h4>
    <button type="button" class="btn btn-primary btn-md md-2" id="addShippingModeButton">
        <i class="bi bi-plus-square"></i> Add
    </button>
</div>

<div id="shippingModesContainer">
    @foreach ($supplier['shipping_mode'] as $key => $mode)
    <div class="row mb-3"> 
        <div class="col-md-5 d-flex align-items-center"> 
            <label class="form-label col-md-4" for="shippingMode_{{ $key }}">
                Shipping Mode:
            </label>
            <div class="col-md-7 mt-3" style="margin-left: 8%;">
                <select class="form-select" id="shippingMode_{{ $key }}" name="shipping_mode[]" style="width: 100% !important;">
                    <option value="truck" @selected($mode->shipping_mode == 'truck')>Truck</option>
                    <option value="sea" @selected($mode->shipping_mode == 'sea')>Sea</option>
                    <option value="air" @selected($mode->shipping_mode == 'air')>Air</option>
                </select>
            </div>
        </div>

        <div class="col-md-5 d-flex align-items-center offset-1"> 
    <label class="form-label col-md-4" for="leadTime_{{ $key }}">
        Lead Time (Week):
    </label>
    <div class="col-md-7 mt-3" style="margin-left: 8%;">
        <div class="input-group">
            @if (isset($supplier['shipping_time'][$key]) && $supplier['shipping_time'][$key]->lead_day)
                <input type="text" value="{{ $supplier['shipping_time'][$key]->lead_day }}" class="form-control" id="leadTime_{{ $key }}" name="lead_day[]">
            @else
                <input type="text" value="" class="form-control" id="leadTime_{{ $key }}" name="lead_day[]">
            @endif
            @if ($key > 0)
            <button type="button" class="btn btn-danger btn-sm" onclick="this.closest('.row').remove();">
                <i class="bi bi-trash"></i>
            </button>
            @endif
        </div>
    </div>
</div>

    </div>
    @endforeach
</div>






            <div id="shippingModesContainer" class="mt-3"></div>
            <div class="mt-3">
                <div class="d-flex justify-content-between align-items-center">
                    <h4 class="mb-0">Shipping Point</h4>
                    <button type="button" id="addShippingLocationButton" class="btn btn-primary btn-md md-2">
                        <i class="bi bi-plus-square"></i> Add
                    </button>
                </div>

            </div>
            @foreach ($supplier['shipping_location'] as $key => $time)
    <div class="row mt-3">
        <div class="col-lg-2 col-md-2">
            <label for="shipping_location" class="form-label">Shipping Point</label>
        </div>

        <div class="col-lg-9 col-md-9">
            <div class="input-group">
                <input type="text" class="form-control" value="{{ $time->shipping_location }}" id="shippingLocation_{{ $key }}" name="shipping_location[]">
                
                @if ($key > 0)
                    <button type="button" class="btn btn-danger btn-sm" onclick="this.closest('.row').remove();">
                        <i class="bi bi-trash"></i> 
                    </button>
                @endif
            </div>
        </div>
    </div>
@endforeach


            <div id="shippingLocationsContainer" class="mt-2">
            </div>

        </div>
        <div class="card-footer">
            <div class="d-flex gap-2 justify-content-end">
                <button type="submit" class="btn btn-primary">Update</button>
            </div>
        </div>
    </form>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
<script>
  document.getElementById('addShippingModeButton').addEventListener('click', function() {
    const container = document.getElementById('shippingModesContainer');

    const row = document.createElement('div');
    row.className = 'row mb-3';

    const colShippingMode = document.createElement('div');
    colShippingMode.className = 'col-md-5 d-flex align-items-center';

    const labelShippingMode = document.createElement('label');
    labelShippingMode.className = 'form-label col-md-4';
    labelShippingMode.textContent = 'Shipping Mode:';
    colShippingMode.appendChild(labelShippingMode);

    const selectWrapper = document.createElement('div');
    selectWrapper.className = 'col-md-7 mt-3';
    selectWrapper.style.marginLeft = '8%';

    const select = document.createElement('select');
    select.className = 'form-select';
    select.name = 'shipping_mode[]';
    select.innerHTML = `
        <option value="Air">Air</option>
        <option value="Sea">Sea</option>
        <option value="Truck">Truck</option>
    `;
    selectWrapper.appendChild(select);
    colShippingMode.appendChild(selectWrapper);

    const colLeadTime = document.createElement('div');
    colLeadTime.className = 'col-md-3 d-flex align-items-center offset-1';

    const labelLeadTime = document.createElement('label');
    labelLeadTime.className = 'form-label col-md-6';
    labelLeadTime.textContent = 'Lead Time (Days):';
    colLeadTime.appendChild(labelLeadTime);

    const inputGroup = document.createElement('div');
    inputGroup.className = 'input-group col-md-7 mt-3';
    inputGroup.style.marginLeft = '21%';

    const input = document.createElement('input');
    input.type = 'text';
    input.name = 'lead_day[]';
    input.className = 'form-control';
    input.placeholder = 'Enter Lead Time';
    inputGroup.appendChild(input);

    const removeButton = document.createElement('button');
    removeButton.type = 'button';
    removeButton.className = 'btn btn-danger btn-sm';
    removeButton.innerHTML = '<i class="bi bi-trash"></i>';
    removeButton.addEventListener('click', function() {
        row.remove();
    });
    inputGroup.appendChild(removeButton);

    colLeadTime.appendChild(inputGroup);

    row.appendChild(colShippingMode);
    row.appendChild(colLeadTime);

    container.appendChild(row);

    $('.form-select').select2({
        width: 'resolve'
    });
});
</script>
<script>
    document.getElementById('addShippingLocationButton').addEventListener('click', function() {
        const container = document.getElementById('shippingLocationsContainer');
        const newIndex = container.children.length + 1;

        const rowDiv = document.createElement('div');
        rowDiv.className = 'row mb-2';

        const labelDiv = document.createElement('div');
        labelDiv.className = 'col-lg-2';

        const newLabel = document.createElement('label');
        newLabel.className = 'form-label';
        newLabel.textContent = 'Shipping Point';
        newLabel.setAttribute('for', 'shippingLocation' + newIndex);

        labelDiv.appendChild(newLabel);

        const inputDiv = document.createElement('div');
        inputDiv.className = 'col-lg-9';

        const inputGroup = document.createElement('div');
        inputGroup.className = 'input-group';

        const newInput = document.createElement('input');
        newInput.type = 'text';
        newInput.className = 'form-control';
        newInput.id = 'shippingLocation' + newIndex;
        newInput.name = 'shipping_location[]';

        const removeButton = document.createElement('button');
        removeButton.className = 'btn btn-danger btn-sm';
        removeButton.type = 'button';
        removeButton.innerHTML = '<i class="bi bi-trash"></i>';
        removeButton.addEventListener('click', function() {
            container.removeChild(rowDiv);
        });

        inputGroup.appendChild(newInput);
        inputGroup.appendChild(removeButton);
        inputDiv.appendChild(inputGroup);

        rowDiv.appendChild(labelDiv);
        rowDiv.appendChild(inputDiv);
        container.appendChild(rowDiv);
    });
</script>
@endsection